Quelles unités utiliser dans le design réactif?
Je ne suis donc vraiment pas au courant des unités à adopter lors de l’élaboration de dispositions réactives. Certains disent utiliser viewport units. D'autres personnes utilisent rem. D'autres disent utiliser les requêtes de médias et le ratio de pixels. Alors, quelle unité est la "bonne", parlant d'expérience et la plus à l'épreuve des balles?
Pour optimiser pour mobile, vous devez configurer une fenêtre d'affichage dans la balise méta.
C'est ce que j'utilise:
<meta name="viewport" content="width=device-width,initial-scale=1">
Ainsi, les unités de pixels correspondent aux unités CSS lorsque je spécifie des unités en pixels dans CSS, même pour les appareils mobiles.
Les seules unités que j'utilise le plus souvent pour une compatibilité maximale sont:
px - L'unité de pixel brute. Sur un ordinateur de bureau, la taille d’un point minuscule prend environ 1/(largeur d’écran) de la largeur de votre écran et 1/(hauteur de l’écran) de votre hauteur d’écran.
em - je crois que cela signifie mesure électronique. Son relatif à la taille de la police. Je l'utilise assez souvent pour redimensionner des éléments. Il y a plus d'informations ici: http://www.w3.org/WAI/GL/css2em.htm
Ensuite, j'utilise parfois un pourcentage d'unité. Cela signifie un pourcentage de l'écran.
Je vous recommande d'utiliser l'unité de pixel uniquement si vous devez le faire, par exemple lorsque vous réservez un bloc d'espace pour une publication spéciale.
Je ne m'embête pas avec les nouvelles unités, car j'aime maintenir la compatibilité avec tous les navigateurs, pas avec un seul.
Si vous observez attentivement la plupart des css réactifs, vous trouverez% comme unité principale pour la largeur, la hauteur, la marge, etc. Pour la taille de police, em est largement accepté. De plus, les requêtes médiatiques sont également importantes.