Diseñe un sitio receptivo con dimensionamiento basado en EM

Sep 11, 2025

Cómo

Probablemente haya escuchado que debe usar unidades relativas para el tamaño de la fuente. Esta es una buena regla para el diseño web accesible; Si el usuario cambia el tamaño de fuente predeterminado de su navegador, esto permite cambiar el tamaño de su página en consecuencia. Es posible que haya tomado este consejo e hizo el interruptor. Tal vez usted salga de su calculadora y haya convertido los tamaños de fuente de su sitio de Absolute px Unidades para EMS o, más probable, REMS.

Pero si es donde se detuviste, te estás perdiendo una gran cantidad de flexibilidad y poder que EMS traen al navegador. La unidad de EM no es simplemente un reemplazo para lo familiar. px ; Puedes usarlo para más propiedades que solo tamaño de fuente . Si lo haces, algunos de sus otros beneficios comienzan a surgir.

Al usar EMS consistentemente, puede diseñar componentes en la página que responden automáticamente si el cambio de tamaño de fuente. Luego, con un truco inteligente para un tamaño de fuente sensible, puede producir una página completa que se ajusta dinámicamente en función del ancho de la ventana del navegador. Permítanme mostrarle cómo aprovechar el comportamiento "relativo" de EMS para crear diseños que sean escalables y receptivos.

Unidades de tamaño de fuente

El uso de EMS para el tamaño de la fuente puede ser complicado. El valor exacto está determinado por el tamaño de fuente hereditario del elemento (es decir, el tamaño de la fuente del elemento principal). Esto se complica cuando comienzas a anidar elementos más profundamente. Si un elemento tiene un tamaño de fuente en EMS, su padre tiene un tamaño de fuente en EMS, y su padre tiene otro otro. Tendrá que multiplicar todos estos valores para determinar el valor computado real del elemento secundario.

Esto significa que colocar el mismo módulo en diferentes contenedores puede cambiar el significado de EM. El módulo será impredecible.

Para evitar esto, normalmente usamos una unidad relativa diferente para el tamaño de la fuente: REMS. Una REM (o 'raíz em') se basa no en el tamaño de fuente heredado, sino en el tamaño de fuente del elemento raíz de la página, & lt; html & gt; . Esto significa que su valor es el mismo durante toda la página. Es más predecible que, y, a menudo, preferible, EMS regular.

Construyendo un módulo con EMS

Vamos a usar unidades relativas para construir un módulo. Sin embargo, no vamos a seguir el enfoque común. En lugar de usar REM para todo, lo usaremos solo una vez: en el elemento más alto del módulo. Esto establecerá un tamaño de fuente conocido para el módulo, en lugar de que se base en una cadena impredecible de valores de EM por encima de él en el DOM. Significa que podemos escalar fácilmente el tamaño del módulo anulando un solo valor.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Use REMS en el elemento más externo para establecer un tamaño de fuente conocido, luego use EMS para construir en función de ese valor

Después de establecer este tamaño de fuente conocido, somos seguros para usar EMS regular en todo el módulo. Úselo, no solo para ningún tamaño de fuente en los subelementos, sino también para la mayoría de las otras propiedades, incluyendo relleno De margen y borde fronterizo .

Construiremos un panel con un encabezado y un cuerpo. El marcado se ve así:

 & lt; div clase = "panel" & gt;
  & lt; div clase = "panel-rumbo" & gt;
    & lt; H3 & GT; He aquí el poder de EMS & LT; / H3 & GT;
  & lt; / DIV & GT;
  & lt; div clase = "panel-cuerpo" y gt;
    Considere las formas en que puede aprovechar el relativo.
    Unidades para el tamaño dinámico de sus módulos.
  & lt; / DIV & GT;
& lt; / DIV & GT;

Vamos a diseñar el contenedor exterior. Estableceremos el tamaño de la fuente en 1 para establecer nuestro valor local de em. Entonces definiremos el borde fronterizo usando EMS. Por lo general, me gusta usar PX para frontera, sin embargo, para obtener una buena línea.

 .pal {
  Tamaño de fuente: 1REM;
  Frontera: 1px sólido # 678;
  Radio de borde: 0.3EM;
  Desbordamiento: oculto;
}

A continuación, estilo los elementos internos. Usaremos EMS para el relleno. Luego aumentaremos el tamaño de la fuente del encabezado a 1.25 veces nuestro valor local de ET, produciendo un tamaño 100px computado en computación.

. PABELLO DEPABLE {
  relleno: 0.6EM 1.2EM;
  Color de fondo: #cde;
  Fronteras: 1px sólido # 678;
}
.Panel-Heading & GT; h3 {
  Tamaño de fuente: 1.25EM;
  Margen: 0;
  Espacio de letras: 0.03EM;
}
.Panel-cuerpo {
  relleno: 0.6EM 1.2EM;
}

Puede multiplicar los valores de acolchado por su tamaño de fuente para determinar sus valores calculados (9.6px vertical y 19.2px horizontal). Sin embargo, sin embargo, no importa. Trate de no ser atascado con mediciones de píxeles perfectas. Esto puede sentirse incómodo, pero presione. Cuanto más use EMS, más se familiarizará con ellos como una unidad en su propio respeto.

Escalado dinámicamente del diseño.

Cuando creamos módulos reutilizables como este, a menudo encontramos que necesitamos algunas variaciones. Di que queríamos crear una versión más grande. Si estuviéramos usando PX para todo, esto significaría aumentar el tamaño de la fuente, el relleno, el radio de borde y así sucesivamente. Sin embargo, debido a que hemos definido todo en relación con un tamaño de fuente basado en REM, solo necesitamos cambiar ese valor, y todo el módulo responderá:

 .panel - grande {talla de fuente: 1.2REM; }

Simplemente agregamos esta clase a un panel para que sea más grande: & lt; div class = "panel panel - grande" & gt; . Esto cambiará la definición local de un EM y, por lo tanto, el radio de la frontera y el cambio de acolchado también, junto con el tamaño de la fuente de sus elementos secundarios. Con una sola declaración, hemos redestimado cada parte del módulo.

A panel module, with paddings and border radius defined using ems — Un módulo de panel, con paddings y radio fronterizos definidos utilizando EMS

Asimismo, podríamos crear una versión pequeña:

 .pal - pequeño {talla de fuente: 0.8REM; }

Al conectar el módulo utilizando un tamaño de fuente de nivel superior en REMS, lo hemos hecho estables y predecibles. Al definir todo lo demás dentro de usar EMS, hemos hecho que todas sus partes componentes se escalan.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Es posible basar el tamaño de todo dentro del módulo en un valor, luego cambie ese valor para escalar todo

Este es un patrón poderoso. Puede usar este enfoque para cualquier cosa en su página, desde menús desplegables hasta botones de redes sociales. Modifique el módulo con un valor REM, luego use EM para prácticamente todo lo demás de los acolchados para posicionarlos a los tamaños de los iconos.

Haciendo que responda

Empujemos el principio de un nivel más. Hemos dimensionado el módulo (y teóricamente todos los otros módulos en la página) utilizando REMS y EMS. Esto, en última instancia, significa que su tamaño se basa en el tamaño de fuente del elemento raíz. Luego, podemos ajustar este valor único para que toda la página responda a su vez.

Vamos a traer otra unidad relativa: vh . El valor calculado de esta unidad se deriva del tamaño de la pantalla del usuario; Es igual al 1 por ciento del ancho de la ventana. Si usamos la unidad VH para definir el tamaño de la fuente de la raíz, se escalará de manera rápida de manera automática, las consultas de medios SANS. Establezca el tamaño de la fuente en la raíz para 2VW :

 html {
  Tamaño de fuente: 2VW;
}

Desafortunadamente, el efecto es un poco demasiado fuerte. En un iPhone 6, por ejemplo, esto se calculará a 5.5px, que es demasiado pequeño. Asimismo, es irrazonablemente grande en pantallas más grandes. Para suavizar el efecto, podemos hacer uso de CSS's. calc () función:

 html {
  Tamaño de fuente: Calc (0.6EM + 1VW);
}

Ahora el tamaño de la fuente se deriva en parte de un valor estable, y en parte de un responsable. Esto produce un efecto mucho mejor. los 0.6EM se comporta como una especie de tamaño mínimo de fuente. Ahora, la raíz em se escalará fluidamente desde aproximadamente 13px en teléfono inteligente a 21px en una pantalla de escritorio promedio.

Con su página formada por módulos escalables, cada uno con base al valor rem, y ellos también se escalarán con la ventana. La página está estructurada con una jerarquía de tres niveles; Puede cambiar el tamaño de la página completa, un módulo individual o un elemento único haciendo una edición simple al tamaño de fuente. Confíe en el EMS y REMS, y el navegador se encargará de la obra para usted.

Puede que aún tenga que agregar la consulta de medios ocasionales para controlar la envoltura de línea y algunas otras preocupaciones receptivas. Pero este pequeño código de código combinado con un hábito de usar EMS y REMS le dará mucho por el camino.

Este artículo fue originalmente destacado en revista neta emisión 288; cómpralo aquí

Artículos relacionados:

10 Tipografía Trucos Cada diseñador debe saber
Una guía de diseñador para tipografía y fuentes.
Master accesible tipografía web

Diseñe un sitio receptivo con dimensionamiento basado en EM

Unidades de tamaño de fuente

Construyendo un módulo con EMS

Escalado dinámicamente del diseño.

Haciendo que responda

Cómo - Artículos más populares

Cómo detener el empañamiento de sus gafas al usar una mascarilla

Comience con activos en el diseñador de afinidad

Diseñador de afinidad: Cómo usar Grids

Crea retratos ilustrados de fotos

Anatomía MasterClass: perfecciona tus figuras

Crea un efecto de portal en maya

Crea un autorretrato con solo 4 colores

Combina habilidades tradicionales y digitales para crear una cubierta cómica

Categorías