Unité de conception adaptative

Question

Je crée une application Web volumineuse à l'aide de la structure d'interface utilisateur de Foundation 3.0 et elle dispose d'une mise en page et d'une taille de polices basées sur px.

En conception, il y a la taille de police/hauteur de ligne et le remplissage/les marges basés sur "em". Je veux savoir que c'est une bonne option pour choisir la taille de la police basée sur "em" et le remplissage pour la mise en page réactive pour les smartphones?

Answer 1

Je pense que le principal avantage pour em en termes de conception réactive est la façon dont vous pouvez facilement changer la taille de la police pour différentes tailles d'écran.

E.g. Si vous utilisez des requêtes multimédias pour les grands écrans et les petits écrans (par exemple, les mobiles et les téléviseurs), vous voudrez changer la taille de la police pour les deux.

Si vous avez tout de taille dans em « s, vous pouvez simplement changer le font-size sur le corps, comme ceci:

/* For TV's (or other large screens */ 
    @media screen and (min-width: 1800px) { 
     body { font-size: 1.4em; } 
    } 

    /* For mobiles */ 
    @media screen and (max-width: 400px) { 
     body { font-size: 0.9em; } 
    } 

Où comme si vous aviez tout tailles px vous avez devoir faire beaucoup plus de travail redimensionnant la police.

EDIT: L'utilisation em des marges + rembourrage peut aussi être une bonne idée pour une mise en page réactif, si je comprends bien, si vous redimensionnez la taille de la police du corps (comme indiqué ci-dessus), vous aurez également redimensionner les marges + rembourrage (les rendant soit plus petit ou plus grand) qui pourrait également être très bénéfique pour un design réactif.

Answer 2

Oui, en utilisant em et % sur px est certainement meilleure pour des sites Web responsive design/applications, car contrairement à px qui est une valeur absolue, em peut être mis à l'échelle en fonction de la résolution, il est considéré à ce qui est crucial si vous voulez cibler smartphones, tablettes, etc.