usar - unidades de medida html css

¿Debo usar unidades de valor px o rem en mi CSS? (11)

Estoy diseñando un nuevo sitio web y quiero que sea compatible con la mayor cantidad posible de navegadores y configuraciones de navegador. Estoy tratando de decidir qué unidad de medida debo usar para los tamaños de mis fuentes y elementos, pero no puedo encontrar una respuesta concluyente.

Mi pregunta es: ¿Debo usar px o rem en mi CSS?

Hasta ahora, sé que usar px no es compatible con usuarios que ajustan el tamaño de fuente base en su navegador.
No los he tenido en cuenta porque son más difíciles de mantener, en comparación con los rem s, ya que están en cascada.
Algunos dicen que los rem s son independientes de la resolución y por lo tanto más deseables. Pero otros dicen que la mayoría de los navegadores modernos amplían todos los elementos de todos modos, por lo que usar px no es un problema.

Estoy preguntando esto porque hay muchas opiniones diferentes sobre cuál es la medida más conveniente de la distancia en CSS, y no estoy seguro de cuál es la mejor.

Como respuesta refleja, recomendaría usar rem, ya que le permite cambiar el "nivel de zoom" de todo el documento de una vez, si es necesario. En algunos casos, cuando desea que el tamaño sea relativo al elemento padre, entonces use em.

Pero el soporte de rem es irregular, IE8 necesita un polyfill y Webkit muestra un error. Además, el cálculo de subpíxeles puede hacer que cosas como las líneas de un píxel a veces desaparezcan. El remedio es codificar en píxeles para elementos tan pequeños. Eso introduce aún más complejidad.

Entonces, en general, pregúntese si vale la pena: ¿qué tan importante y probable es que cambie el "nivel de zoom" de todo el documento dentro de CSS?

Para algunos casos es sí, para algunos casos será no.

Entonces, depende de sus necesidades, y tiene que evaluar los pros y los contras, porque el uso de rem y em introduce algunas consideraciones adicionales en comparación con el flujo de trabajo "normal" basado en píxeles.

Tenga en cuenta que es fácil cambiar (o más bien convertir) su CSS de px a rem (JavaScript es otra historia), porque los siguientes dos bloques de código CSS producirían el mismo resultado:

html { } body { font-size:14px; } .someElement { width: 12px; }

html { font-size:1px; } body { font-size:14rem; } .someElement { width: 12rem; }

He encontrado que la mejor manera de programar los tamaños de fuente de un sitio web es definir un tamaño de fuente base para el body y luego usar em''s (o rem''s) para cada otra font-size que declare después de eso. Supongo que es una preferencia personal, pero me ha servido bien y también me ha facilitado mucho la incorporación de un diseño más receptivo .

En lo que respecta al uso de unidades rem, creo que es bueno encontrar un equilibrio entre ser progresivo en su código, pero también ofrecer soporte para navegadores más antiguos. Echa un vistazo a este enlace sobre el soporte del navegador para las unidades rem , que te ayudará en gran medida en tu decisión.

La mitad (pero solo la mitad) de la respuesta sarcástica (la otra mitad es un amargo desdén por la realidad de la burocracia):

Usar vh

Todo está siempre dimensionado para la ventana del navegador.

Siempre permita desplazarse hacia abajo, nunca hacia un lado.

Establezca el ancho del cuerpo para que sea un 50vh estático, y nada flota o sale del div padre. Y el estilo solo utiliza tablas para que todo se mantenga rígido en su lugar como se espera. Incluya una función javascript para deshacer cualquier ctrl +/- actividad que el usuario pueda hacer.

Todo el mundo te odiará, excepto las personas que te dicen que hagas que las cosas encajen con su modelo, y estarán extasiados. Y todos saben que su opinión es la única que importa.

La respuesta de josh3736 es buena, pero para proporcionar un contrapunto 3 años después:

Recomiendo el uso de unidades rem para fuentes, aunque solo sea porque le facilita a usted , el desarrollador, cambiar los tamaños. Es cierto que los usuarios rara vez cambian el tamaño de fuente predeterminado en sus navegadores, y que el zoom del navegador moderno escalará las unidades px . Pero qué pasa si su jefe se acerca a usted y le dice "no amplíe las imágenes o los íconos, sino que aumente el tamaño de las fuentes". Es mucho más fácil simplemente cambiar el tamaño de la fuente raíz y dejar que todas las otras fuentes se amplíen en relación a eso, y luego cambiar los tamaños de px en docenas o cientos de reglas de css.

Creo que todavía tiene sentido usar unidades px para algunas imágenes, o para ciertos elementos de diseño que siempre deben tener el mismo tamaño, independientemente de la escala del diseño.

Caniuse.com puede haber dicho que solo el 75% de los navegadores cuando josh3736 publicó su respuesta en 2012, pero hasta el 27 de marzo reclaman un apoyo del 93,78% . Solo IE8 no lo admite entre los navegadores que rastrean.

Los em son el camino a seguir, no solo para fuentes, sino que también puede usarlos con cuadros, grosor de línea y otras cosas, ¿por qué?

En pocas palabras, los em son los únicos que se escalan al unísono con las teclas alt + y alt en el navegador para hacer zoom.

Otras mediciones de escala, pero no tan limpiamente como un em.

En una nota lateral, si desea lo mejor en escalado, también convierta sus gráficos a SVG basado en vectores siempre que sea posible, ya que estos también se escalarán limpiamente con la relación de zoom del navegador.

Sí. O, mejor dicho, no.

Er, quiero decir, no importa. Utilice el que tiene sentido para su proyecto particular. PX y EM o ambos son igualmente válidos pero se comportarán un poco diferente según la arquitectura CSS de su página en general.

ACTUALIZAR:

Para aclarar, estoy afirmando que, por lo general, probablemente no importa cuál uses. A veces, es posible que desee elegir específicamente uno sobre el otro. Los EM son agradables si puedes empezar desde cero y quieres usar un tamaño de fuente base y hacer todo lo relacionado con eso.

Los PX a menudo son necesarios cuando está adaptando un nuevo diseño a una base de código existente y necesita la especificidad de px para evitar problemas de anidamiento.

Este artículo describe bastante bien los pros y los contras de px , em y rem .

El autor finalmente concluye que el mejor método es probablemente usar tanto px como rem , declarando px primero para los navegadores más antiguos y redeclarando rem para los navegadores más nuevos:

html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

pt es similar a rem , ya que es relativamente fijo, pero casi siempre es independiente de DPI, incluso cuando los navegadores no compatibles tratan a px de una manera dependiente del dispositivo. rem varía con el tamaño de fuente del elemento raíz, pero puede usar algo como Sass / Compass para hacer esto automáticamente con pt .

Si tuvieras esto:

html { font-size: 12pt; }

entonces 1rem siempre sería 12pt . rem y em son tan independientes del dispositivo como los elementos en los que se basan; algunos navegadores no se comportan de acuerdo con las especificaciones, y tratan a px literalmente. Incluso en los viejos tiempos de la Web, 1 punto era considerado como 1/72 de pulgada, es decir, hay 72 puntos en una pulgada.

Si tiene un navegador antiguo que no es compatible, y tiene:

html { font-size: 16px; }

entonces 1rem será dependiente del dispositivo. Para los elementos que heredarían de html por defecto, 1em también dependería del dispositivo. 12pt sería el equivalente independiente del dispositivo, esperanzadamente garantizado: 16px / 96px * 72pt = 12pt , donde 96px = 72pt = 1in .

Puede ser bastante complicado hacer los cálculos matemáticos si desea atenerse a unidades específicas. Por ejemplo, .75em of html = .75rem = 9pt , y .66em of .75em of html = .5rem = 6pt . Una buena regla de oro:

Utilice pt para tamaños absolutos. Si realmente necesitas que esto sea dinámico en relación con el elemento raíz, estás pidiendo demasiado CSS; necesita un lenguaje que compile en CSS, como Sass / SCSS.
Use em para tamaños relativos. Es muy útil poder decir: "Quiero que el margen de la izquierda sea aproximadamente el ancho máximo de una letra" o "Haga que el texto de este elemento sea un poco más grande que su entorno". <h1> es un buen elemento para utilizar un tamaño de fuente en ems, ya que puede aparecer en varios lugares, pero siempre debe ser más grande que el texto cercano. De esta manera, no tiene que tener un tamaño de fuente separado para cada clase que se aplica a h1 : el tamaño de fuente se adaptará automáticamente.
Usa px para tamaños muy pequeños. En tamaños muy pequeños, pt puede volverse borroso en algunos navegadores a 96 DPI, ya que pt y px no se alinean. Si solo desea crear un borde delgado de un píxel, dígalo. Si tiene una pantalla de alta DPI, esto no será obvio para usted durante la prueba, así que asegúrese de realizar una prueba en una pantalla genérica de 96 DPI en algún momento.
No trates en subpíxeles para hacer las cosas más elegantes en pantallas de alto DPI. Algunos navegadores pueden admitirlo, especialmente en pantallas de alto DPI, pero es un no-no. La mayoría de los usuarios prefieren grandes y claros, aunque la web nos ha enseñado a los desarrolladores a hacer lo contrario. Si desea agregar detalles extendidos para sus usuarios con pantallas de última generación, puede usar gráficos vectoriales (leer: SVG), que debería estar haciendo de todos modos.

TL; DR: uso px .

Los hechos

Primero, es extremadamente importante saber que, según la especificación , la unidad px CSS no es igual a un píxel de visualización física. Esto siempre ha sido cierto, incluso en la especificación CSS 1 de 1996.
CSS define el píxel de referencia , que mide el tamaño de un píxel en una pantalla de 96 ppp. En una pantalla que tiene una ppp sustancialmente diferente a 96 ppp (como las pantallas Retina), el agente de usuario ajusta la unidad px para que su tamaño coincida con el de un píxel de referencia. En otras palabras, este cambio de escala es exactamente la razón por la cual 1 píxel CSS es igual a 2 píxeles físicos de visualización Retina.
Dicho esto, hasta 2010 (y pese a la situación del zoom móvil), el px casi siempre equivalía a un píxel físico, porque todas las pantallas disponibles en general estaban alrededor de 96 ppp.
Los tamaños especificados en em s son relativos al elemento padre . Esto lleva al "problema compuesto" de los ems, donde los elementos anidados se hacen cada vez más grandes o más pequeños. Por ejemplo:
body { font-size:20px; } div { font-size:0.5em; }
Nos da:
<body> - 20px <div> - 10px <div> - 5px <div> - 2.5px <div> - 1.25px
El CSS3 rem , que siempre es relativo solo al elemento html la raíz, es demasiado nuevo para confiar. A partir de julio de 2012, alrededor del 75% de todos los navegadores en uso son compatibles con la rem .

La opinión

Creo que todos están de acuerdo en que es bueno diseñar sus páginas para que se adapten a todos, y para tomar en cuenta a los discapacitados visuales. Una de esas consideraciones (¡pero no la única!) Es permitir que los usuarios amplíen el texto de su sitio para que sea más fácil de leer.

Al principio, la única forma de proporcionar a los usuarios una forma de escalar el tamaño del texto era mediante el uso de unidades de tamaño relativo (como em s). Esto se debe a que el menú de tamaño de fuente del navegador simplemente cambió el tamaño de fuente de la raíz. Por lo tanto, si especificó tamaños de fuente en px , no se escalarían al cambiar la opción de tamaño de fuente del navegador.

Los navegadores modernos (e incluso el no tan moderno IE7) cambiaron el método de escala predeterminado para simplemente ampliarlo todo, incluidas las imágenes y los tamaños de las cajas. Esencialmente, hacen que el píxel de referencia sea más grande o más pequeño.

Sí, alguien todavía podría cambiar la hoja de estilo predeterminada de su navegador para modificar el tamaño de fuente predeterminado (el equivalente a la opción de tamaño de fuente de estilo antiguo), pero esa es una forma muy esotérica de hacerlo y apostaría a que nadie lo hace. (En Chrome, está oculto bajo la configuración avanzada, contenido web, tamaños de fuente. En IE9, está aún más oculto. Tiene que presionar Alt y ir a Ver, Tamaño de texto). Es mucho más fácil seleccionar la opción de zoom en el menú principal del navegador (o use Ctrl + + / - / / rueda del ratón).

^{1 - dentro del error estadístico, naturalmente}

Si asumimos que la mayoría de los usuarios escalan las páginas con la opción de zoom, las unidades relativas me parecen irrelevantes. Es mucho más fácil desarrollar su página cuando todo está especificado en la misma unidad (todas las imágenes se tratan en píxeles) y no tiene que preocuparse por la composición. ( "Me dijeron que no habría matemática" ; hay que lidiar con tener que calcular lo que realmente funciona con 1.5em).

Otro problema potencial de usar solo unidades relativas para los tamaños de fuente es que las fuentes modificadas por el usuario pueden romper las suposiciones que hace su diseño. Por ejemplo, esto podría hacer que el texto se recorte o se ejecute durante demasiado tiempo. Si usa unidades absolutas, no tiene que preocuparse por los tamaños de fuente inesperados para no romper su diseño.

Así que mi respuesta es usar unidades de píxeles. Yo uso px para todo. Por supuesto, su situación puede variar, y si debe respaldar IE6 (que los dioses de los RFC tengan piedad de usted), tendrá que usar em s de todos modos.

_{Me gustaría elogiar la respuesta de josh3736 por proporcionar un excelente contexto histórico.} _{Si bien está bien articulado, el panorama de CSS ha cambiado en los casi cinco años desde que se hizo esta pregunta.} _{Cuando se hizo esta pregunta, px fue la respuesta correcta, pero esa ya no es válida hoy.}

tl; dr: use rem

Resumen de la unidad

Históricamente, las unidades px representaban típicamente un píxel de dispositivo. Con dispositivos con una densidad de píxeles cada vez mayor, esto ya no es válido para muchos dispositivos, como con la pantalla Retina de Apple.

rem unidades rem representan el tamaño r oot em . Es el font-size de font-size de las coincidencias :root . En el caso de HTML, es el elemento <html> ; para SVG, es el elemento <svg> . El font-size predeterminado en cada navegador * es 16px .

Al momento de escribir, rem es compatible con aproximadamente el 98% de los usuarios . Si le preocupa ese otro 2%, le recordaré que las consultas de medios también son compatibles con aproximadamente el 98% de los usuarios .

En el uso de `px`

La mayoría de los ejemplos de CSS en Internet utilizan valores de px porque eran el estándar de facto. pt , in y una variedad de otras unidades podrían haber sido utilizadas en teoría, pero no manejaban los valores pequeños, ya que rápidamente tendríamos que recurrir a las fracciones, que eran más largas de escribir y más difíciles de razonar.

Si quisieras un borde delgado, con px podrías usar 1px , con pt deberías usar 0.75pt para obtener resultados consistentes, y eso no es muy conveniente.

En el uso de `rem`

El valor predeterminado de 16px de 16px no es un argumento muy sólido para su uso. Escribir 0.0625rem es peor que escribir 0.75pt , entonces ¿por qué alguien usaría rem ?

Hay dos partes para la ventaja de rem sobre otras unidades.

Se respetan las preferencias del usuario.
Puedes cambiar el valor de px aparente de rem a lo que quieras

Respetando las preferencias del usuario

El zoom del navegador ha cambiado mucho con los años. Históricamente, muchos navegadores solo ampliarían el tamaño de la font-size , pero eso cambió bastante rápidamente cuando los sitios web se dieron cuenta de que sus hermosos diseños de píxeles perfectos se estaban rompiendo cada vez que alguien acercaba o alejaba la imagen. En este punto, los navegadores escalan toda la página, por lo que el zoom basado en fuentes está fuera de la imagen.

Respetar los deseos de un usuario no está fuera de la imagen. El hecho de que un navegador esté configurado en 16px de forma predeterminada, no significa que ningún usuario pueda cambiar sus preferencias a 24px o 32px para corregir la mala visión. Si basa sus unidades de forma rem , cualquier usuario con un tamaño de fuente mayor verá un sitio proporcionalmente más grande. Las fronteras serán más grandes, el relleno será más grande, los márgenes serán más grandes, todo se ampliará de manera fluida.

Si basa sus consultas de medios en rem , también puede asegurarse de que el sitio que ven sus usuarios se ajuste a su pantalla. Un usuario con font-size establecido en 32px en un navegador de 640px ancho, verá efectivamente su sitio como se muestra a un usuario a 16px en un navegador de 320px ancho. No hay absolutamente ninguna pérdida para RWD en el uso de rem .

Cambio de valor aparente de `px`

Debido a que rem se basa en el font-size de font-size del :root nodo :root , si desea cambiar lo que representa 1rem , todo lo que tiene que hacer es cambiar el font-size :

:root { font-size: 100px; } body { font-size: 1rem; }

<p>Don''t ever actually do this, please</p>

Hagas lo que hagas, no configures el font-size de font-size del elemento :root en un valor de px .

Si establece el font-size en html en un valor de px , ha eliminado las preferencias del usuario sin una manera de recuperarlas.

Si desea cambiar el valor aparente de rem , use % unidades.

La matemática para esto es razonablemente sencilla.

El tamaño de fuente aparente de :root es 16px , pero digamos que queremos cambiarlo a 20px . Todo lo que necesitamos hacer es multiplicar 16 por algún valor para obtener 20 .

Configura tu ecuación:

16 * X = 20

Y resolver para X :

X = 20 / 16 X = 1.25 X = 125%

:root { font-size: 125%; }

<p>If you''re using the default font-size, I''m 20px tall.</p>

Hacer todo en múltiplos de 20 no es tan bueno, pero una sugerencia común es hacer que el tamaño aparente de rem igual a 10px . El número mágico para eso es 10/16 que es 0.625 , o 62.5% .

:root { font-size: 62.5%; }

<p>If you''re using the default font-size, I''m 10px tall.</p>

El problema ahora es que su font-size de font-size predeterminado para el resto de la página es demasiado pequeño, pero hay una solución simple para eso: establecer un font-size el body usando rem :

:root { font-size: 62.5%; } body { font-size: 1.6rem; }

<p>I''m the default font-size</p>

Es importante tener en cuenta que, con este ajuste en su lugar, el valor aparente de rem es 10px que significa que cualquier valor que pueda haber escrito en px se puede convertir directamente en rem al golpear un lugar decimal.

padding: 20px;

se convierte en

padding: 2rem;

El tamaño de fuente aparente que elija depende de usted, así que si lo desea, no hay razón por la que no pueda usar:

:root { font-size: 6.25%; } body { font-size: 16rem; }

y tener 1rem igual a 1px .

Así que ahí lo tienen, una solución simple para respetar los deseos de los usuarios y al mismo tiempo evitar el exceso de complicación de su CSS.

Espera, entonces, ¿cuál es la trampa?

Tenía miedo de que pudieras preguntar eso. Por mucho que me gustaría fingir que el rem es magia y resuelve todas las cosas, todavía hay algunos temas importantes. En mi opinión , no hay nada que rompa tratos, pero los llamaré para que no puedan decir que no les advertí.

Preguntas de los medios

Uno de los primeros problemas con los que se encontrará rem las consultas de medios. Considere el siguiente código:

:root { font-size: 1000px; } @media (min-width: 1rem) { :root { font-size: 1px; } }

Aquí, el valor de rem cambia dependiendo de si se aplica la consulta de medios, y la consulta de medios depende del valor de rem , así que, ¿qué diablos está pasando?

rem en consultas de medios utiliza el valor inicial de font-size de font-size y no tiene en cuenta ningún cambio que pueda haber ocurrido en el font-size de font-size del elemento :root . En otras palabras, su valor aparente es siempre 16px .

Esto es un poco molesto, porque significa que tiene que hacer algunos cálculos fraccionarios, pero he encontrado que las consultas de los medios más comunes ya usan valores que son múltiplos de 16.

| px | rem | +------+-----+ | 320 | 20 | | 480 | 30 | | 768 | 48 | | 1024 | 64 | | 1200 | 75 | | 1600 | 100 |

Además, si está utilizando un preprocesador de CSS, puede usar mixins o variables para administrar sus consultas de medios, lo que ocultará el problema por completo.

Cambio de contexto

Si cambia entre varios proyectos diferentes, es muy posible que el tamaño de fuente aparente de rem tenga valores diferentes. En un proyecto, podría estar usando un tamaño aparente de 10px que en otro proyecto el tamaño aparente podría ser 1px . Esto puede ser confuso y causar problemas.

Mi única recomendación aquí es seguir con el 62.5% para convertir rem a un tamaño aparente de 10px , porque eso ha sido más común en mi experiencia.

Bibliotecas CSS compartidas

Si está escribiendo CSS que se usará en un sitio que no controla, como para un widget incorporado, realmente no hay una buena manera de saber qué tendrá el tamaño aparente rem . Si ese es el caso, no dude en seguir utilizando px .

Sin embargo, si aún desea usar rem , considere la posibilidad de liberar una versión Sass o LESS de la hoja de estilo con una variable para anular la escala del tamaño aparente de rem .

_{* No quiero asustar a nadie para que no use rem , pero no he podido confirmar oficialmente que todos los navegadores 16px de forma predeterminada.} _{Verás, hay muchos navegadores y no sería tan difícil que un navegador se haya 18px ligeramente, digamos 15px o 18px .} _{En las pruebas, sin embargo, no he visto un solo ejemplo en el que un navegador que usa la configuración predeterminada en un sistema que usa la configuración predeterminada tuviera un valor distinto de 16px .} _{Si encuentras un ejemplo así, por favor compártelo conmigo.}

Los EM son lo ÚNICO que se adapta a las consultas de los medios que manejan la escala +/-, que las personas hacen todo el tiempo, no solo las personas ciegas. Aquí hay otra demostración profesional muy bien escrita de por qué esto importa.

Por cierto, esta es la razón por la que la Fundación Zurb usa ems , mientras que el Bootstrap 3 inferior todavía usa píxeles.