Share
Lors de la CSSConf 2014 en Australie, Simurai a donné une présentation vraiment étonnante intitulée "Styling with Strings", dans laquelle il a présenté de nombreuses techniques de développement dans le navigateur. L’une des astuces qui m’a le plus impressionné est la suivante: insérez des composants d’interface utilisateur avec des MÉ et laissez de l’espace entre eux avec des REM. Ou, en règle générale: EMs pour le rembourrage, REMs pour la marge.
C’est parce que cela nous permet de redimensionner l’ensemble de nos sites simplement en modifiant quelques-uns taille de police Propriétés.
Vous voulez que vos composants d'interface utilisateur soient tous un peu plus grands? Bump votre corps taille de la police: 13px; Jusqu'à 15px. Voulez-vous mettre un peu plus d'espace entre ces composants? Bump votre html taille de la police: 15px; Jusqu'à 17px.
Regarder l'espace entre ces boutons augmente à mesure que je compose l'élément HTML taille de police (et donc la mondialisation rembourrage) vers le haut. Le remplissage des boutons reste résolument réglé à rembourrage: 1em 3em.
Dans cet exemple, je compose le numéro taille de police sur l'élément de corps. Comme vous pouvez le voir, sauf que les marges entre les éléments augmentent proportionnellement..
C'est une approche très rapide mais puissante pour créer des mises en page flexibles. Jouez avec la démo vous-même:
Accentsconagua