Share
En la CSSConf 2014 en Australia, Simurai dio una presentación realmente sorprendente llamada "Estilismo con cuerdas", en la que repasó algunas técnicas para desarrollar en el navegador. La única sugerencia que realmente me llamó la atención fue esta: rellenar los componentes de la interfaz de usuario con EM, poner espacio entre ellos con los REM. O, como regla general: EMs para relleno, REMs para margen.
La razón por la que esto es tan interesante es porque nos permite escalar todos los sitios hacia arriba y hacia abajo simplemente cambiando algunos tamaño de fuente propiedades.
¿Quieres que tus componentes de UI sean un poco más grandes? Golpear su cuerpo font-size: 13px; hasta 15px. ¿Quieres poner un poco más de espacio en blanco entre esos componentes? Golpear su html font-size: 15px; hasta 17px.
Observe cómo aumenta el espacio en blanco entre estos botones a medida que marca el elemento html tamaño de fuente (y por lo tanto el mundial relleno) hacia arriba. El relleno de los botones permanece firmemente establecido en relleno: 1em 3em.
En este ejemplo estoy marcando el tamaño de fuente en el elemento cuerpo. Como se puede ver todo, excepto los márgenes entre los elementos crece proporcionalmente..
Este es un enfoque realmente rápido, pero poderoso para crear diseños flexibles. Juega con la demo tu mismo:
Accentsconagua