¿Debo usar unidades de valor px o rem en mi CSS? [cerrado]

Resuelto asked hace 12 años • 10 respuestas

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: ¿debería usar pxo remen mi CSS?

  • Hasta ahora sé que el uso pxno es compatible con usuarios que ajustan el tamaño de fuente base en su navegador.
  • He ignorado ems porque son más complicados de mantener, en comparación con rems, ya que caen en cascada.
  • Algunos dicen que remlos s son independientes de la resolución y, por tanto, más deseables. Pero otros dicen que la mayoría de los navegadores modernos hacen zoom en todos los elementos por igual, por lo que su uso pxno es un problema.

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

avatar Aug 03 '12 22:08
Aceptado

TL; DR: uso px.

Los hechos

  • Primero, es extremadamente importante saber que, según las especificacionespx , la unidad CSS no equivale a un píxel de visualización físico. 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 un ppp sustancialmente diferente de 96 ppp (como las pantallas Retina), el agente de usuario cambia la escala de la pxunidad 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 que 1 píxel CSS equivale a 2 píxeles físicos de la pantalla Retina.

    Dicho esto, hasta 2010 (y a pesar de la situación del zoom móvil), pxcasi siempre equivalía a un píxel físico, porque todas las pantallas ampliamente disponibles tenían alrededor de 96 ppp.

  • Los tamaños especificados en ems son relativos al elemento principal . Esto conduce al em"problema agravado" donde los elementos anidados se hacen progresivamente 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 únicamente al htmlelemento raíz, ahora es compatible con el 99,67% de todos los navegadores en uso .

La opinión

Creo que todo el mundo está de acuerdo en que es bueno diseñar sus páginas para que se adapten a todos y tengan en cuenta a las personas con discapacidad visual. Una de esas consideraciones (¡pero no la única!) es permitir a los usuarios agrandar 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 ems). Esto se debe a que el menú de tamaño de fuente del navegador simplemente cambió el tamaño de fuente raíz. Por lo tanto, si especifica tamaños de fuente en px, no se escalarán 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 ampliar todo, incluidas las imágenes y los tamaños de cuadros. Básicamente, hacen que el píxel de referencia sea más grande o más pequeño.

Sí, alguien aún 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 apuesto a que nadie lo hace. (En Chrome, está oculto debajo de la configuración avanzada, contenido web y tamaños de fuente. En IE9, está aún más oculto. Tienes que presionar Alt e ir a Ver, Tamaño del texto). Es mucho más fácil simplemente seleccionar la opción Zoom en menú principal del navegador (o utilice 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 usando la opción de zoom, encuentro que las unidades relativas son en su mayoría 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áticas" : hay que tener que calcular lo que realmente equivale a 1,5em).

Otro problema potencial de usar sólo unidades relativas para los tamaños de fuente es que las fuentes redimensionadas por el usuario pueden romper las suposiciones que hace su diseño. Por ejemplo, esto podría provocar que el texto se recorte o se extienda demasiado. Si utiliza unidades absolutas, no tiene que preocuparse de que tamaños de fuente inesperados rompan su diseño.

Entonces mi respuesta es usar unidades de píxeles. Yo uso pxpara todo. Por supuesto, tu situación puede variar, y si debes soportar IE6 (que los dioses de los RFC se apiaden de ti), tendrás que usar ems de todos modos.

josh3736 avatar Aug 03 '2012 21:08 josh3736

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

tl;dr: usorem

Descripción general de la unidad

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

remLas unidades representan el tamaño de la raíz . Es el de cualquier partido . En el caso de HTML, es el elemento; para SVG, es el elemento. El valor predeterminado en todos los navegadores* es .font-size:root<html><svg>font-size16px

Sobre el usopx

La mayoría de los ejemplos de CSS en Internet utilizan pxvalores porque eran el estándar de facto. pt, y en teoría se podríanin haber usado una variedad de otras unidades , pero no manejaban bien valores pequeños, ya que rápidamente era necesario recurrir a fracciones, que eran más largas de escribir y más difíciles de razonar.

Si quisieras un borde delgado, pxpodrías usar 1px, ptnecesitarías usarlo 0.75ptpara obtener resultados consistentes, y eso simplemente no es muy conveniente.

Sobre el usorem

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

Hay dos partes a remfavor de 's sobre otras unidades.

  • Se respetan las preferencias del usuario.
  • Puedes cambiar el pxvalor aparente de rema lo que quieras.

Respetar las preferencias del usuario

El zoom del navegador ha cambiado mucho a lo largo de los años. Históricamente, muchos navegadores solo escalaban 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 rompían cada vez que alguien acercaba o alejaba el zoom. En este punto, los navegadores escalan toda la página, por lo que el zoom basado en fuentes queda fuera de escena.

Respetar los deseos de un usuario no está fuera de lugar. El hecho de que un navegador esté configurado 16pxde forma predeterminada no significa que ningún usuario no pueda cambiar sus preferencias 24pxo 32pxcorregir la visión deficiente o la mala visibilidad (por ejemplo, el brillo de la pantalla). Si basa sus unidades en rem, cualquier usuario con un tamaño de fuente más alto verá un sitio proporcionalmente más grande. Los bordes serán más grandes, el relleno será más grande, los márgenes serán más grandes, todo se ampliará con fluidez.

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 font-sizeconfigurado 32pxen un 640pxnavegador amplio verá efectivamente su sitio como se le muestra a un usuario en 16pxun 320pxnavegador amplio. No hay absolutamente ninguna pérdida para el diseño web responsivo (RWD) al usar rem.

pxCambiar el valor aparente

Debido rema que se basa en font-sizeel :rootnodo, si desea cambiar lo que 1remrepresenta, todo lo que tiene que hacer es cambiar font-size:

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Expandir fragmento

Hagas lo que hagas, no establezcas el :rootelemento font-sizeen un pxvalor.

Si configura on font-sizeen htmlun pxvalor, habrá eliminado las preferencias del usuario sin una forma de recuperarlas.

Si desea cambiar el valor aparenterem de , utilice %unidades.

Las matemáticas para esto son razonablemente sencillas.

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

Configura tu ecuación:

16 * X = 20

Y resuelve 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>
Expandir fragmento

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

:root {
  font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Expandir fragmento

El problema ahora es que el valor predeterminado font-sizepara el resto de la página es demasiado pequeño, pero hay una solución simple para eso: establezca font-sizeon bodyusing rem:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Expandir fragmento

Es importante tener en cuenta que, con este ajuste implementado, el valor aparente de remes 10px, lo que significa que cualquier valor que haya escrito pxse puede convertir directamente remagregando un decimal.

padding: 20px;

se convierte en

padding: 2rem;

El tamaño de fuente aparente que elijas depende de ti, así que si lo deseas, no hay ningún motivo por el que no puedas usar:

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

y tener 1remigual 1px.

Ahí lo tiene, una solución simple para respetar los deseos del usuario y al mismo tiempo evitar complicar demasiado su CSS.

Espera, ¿cuál es el problema?

Tenía miedo de que preguntaras eso. Por mucho que me gustaría pretender que esto remes mágico y lo resuelve todo, todavía hay algunas cuestiones importantes. En mi opinión , no es nada decisivo , pero los voy a llamar para que no puedas decir que no te lo advertí.

Consultas de medios (use em)

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

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

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

remen consultas de medios utiliza el valor inicial de font-sizey no debe (consulte la sección Safari) tener en cuenta cualquier cambio que pueda haber ocurrido en font-sizeel :rootelemento. En otras palabras, su valor aparente es siempre 16px .

Esto es un poco molesto, porque significa que tienes que hacer algunos cálculos fraccionarios, pero he descubierto que las consultas de medios más comunes ya utilizan 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 CSS, puede usar mixins o variables para administrar sus consultas de medios, lo que enmascarará el problema por completo.

Safari

Lamentablemente, existe un error conocido en Safari en el que los cambios en el :roottamaño de fuente en realidad cambian los remvalores calculados para los rangos de consulta de medios. Esto puede provocar un comportamiento muy extraño si se cambia el tamaño de fuente del :rootelemento dentro de una consulta de medios. Afortunadamente, la solución es sencilla: utilizar emunidades para consultas de medios .

Cambio de contexto

Si cambia entre proyectos diferentes, es muy posible que el tamaño de fuente aparente remtenga valores diferentes. En un proyecto, es posible que esté utilizando un tamaño aparente de 10pxdonde en otro proyecto podría estar el tamaño aparente 1px. Esto puede resultar confuso y causar problemas.

Mi única recomendación aquí es continuar con 62.5%la conversión rema un tamaño aparente de 10px, porque en mi experiencia eso ha sido más común.

Bibliotecas CSS compartidas

Si estás escribiendo CSS que se usará en un sitio que no controlas, como por ejemplo un widget incrustado, realmente no hay una buena manera de saber qué tamaño aparente remtendrá. Si ese es el caso, no dudes en seguir usándolo px.

Sin embargo, si aún desea usarla rem, considere lanzar una versión Sass o MENOS de la hoja de estilo con una variable para anular la escala para el tamaño aparente de rem.

* No quiero asustar a nadie para que deje de usar rem, pero no he podido confirmar oficialmente que todos los navegadores lo utilicen 16pxde forma predeterminada. Verá, hay muchos navegadores y no sería tan difícil para un navegador divergir ligeramente hacia, digamos 15pxo 18px. Sin embargo, durante las pruebas no he visto ni un solo ejemplo en el que un navegador que utiliza la configuración predeterminada en un sistema que utiliza la configuración predeterminada tuviera algún valor distinto de 16px. Si encuentra un ejemplo así, compártalo conmigo.

zzzzBov avatar Mar 31 '2017 03:03 zzzzBov

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

El autor finalmente concluye que el mejor método probablemente sea usar ambos pxy remdeclarar pxprimero para navegadores más antiguos y volver a declarar rempara 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 */
uzyn avatar Aug 03 '2012 16:08 uzyn