Me gustaría elogiar la respuesta de josh3736 por proporcionar un excelente contexto histórico. Si bien está bien articulado, el panorama 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 eso ya no es cierto hoy.
tl; dr: usorem
Descripción de la unidad
Históricamente, las pxunidades generalmente representaban un píxel del dispositivo. Con dispositivos que 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.
remunidades representan la r oot em tamaño. Es el font-sizede cualquier partido :root. En el caso de HTML, es el <html>elemento; para SVG, es el <svg>elemento. El valor predeterminado font-sizeen cada navegador * es 16px.
Al momento de escribir, remes 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 .
Sobre el uso px
La mayoría de los ejemplos de CSS en Internet usan pxvalores porque eran el estándar de facto. pt, iny una variedad de otras unidades podrían haberse usado en teoría, pero no manejaban bien los valores pequeños, ya que rápidamente necesitarías recurrir a fracciones, que eran más largas de escribir y más difíciles de razonar.
Si quisieras un borde delgado, con el pxque podrías usar 1px, con el ptque tendrías que usar 0.75ptpara obtener resultados consistentes, y eso no es muy conveniente.
Sobre el uso rem
remEl valor predeterminado de 16pxno es un argumento muy fuerte para su uso. Escribir 0.0625remes peor que escribir 0.75pt, entonces, ¿por qué alguien lo usaría rem?
Hay dos partes en remventaja sobre otras unidades.
- Se respetan las preferencias del usuario.
- Puedes cambiar el
pxvalor aparente de remlo que quieras
Respetando las preferencias del usuario
El zoom del navegador ha cambiado mucho a lo largo de los años. Históricamente, muchos navegadores solo se escalaban font-size, pero eso cambió bastante rápido cuando los sitios web se dieron cuenta de que sus hermosos diseños perfectos en píxeles se rompían cada vez que alguien se acercaba o alejaba. 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 16pxde forma predeterminada, no significa que ningún usuario pueda cambiar sus preferencias 24pxo 32pxcorregir la baja visión o la poca 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. 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 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 ancho verá efectivamente su sitio como se muestra a un usuario en 16pxun 320pxnavegador ancho. No hay absolutamente ninguna pérdida para RWD en el uso rem.
Cambio del pxvalor aparente
Debido a que remse basa en la font-sizedel :rootnodo, si desea cambiar lo que 1remrepresenta, 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 establezcas los :rootelementos font-sizeen un pxvalor.
Si se establece el font-sizesobre htmla un pxvalor, que ha impresionado las preferencias del usuario sin una manera de recuperarlos.
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 :rootes 16px, pero digamos que queremos cambiarlo 20px. Todo lo que necesitamos 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>
Hacer todo en múltiplos de 20no es tan bueno, pero una sugerencia común es hacer que el tamaño aparente sea remigual a 10px. El número mágico para eso es 10/16cuál 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 valor predeterminado font-sizepara el resto de la página se establece demasiado pequeñas, pero hay una solución simple para ello: Configurar una font-sizeen bodyel uso de 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 remes lo 10pxque significa que cualquier valor en el que haya escrito pxpuede convertirse directamente al remcolocar un decimal.
padding: 20px;
se convierte en
padding: 2rem;
El tamaño de fuente aparente que elija depende de usted, por lo que si lo desea, no hay razón para que no pueda usar:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
y tener 1remigual 1px.
Así que 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 pudieras preguntar eso. Por mucho que quisiera fingir que eso remes mágico y lo resuelve todo, todavía hay algunos problemas importantes. En mi opinión no hay nada que rompa el trato , pero los voy a llamar para que no me digas que no te lo advertí.
Consultas de medios (uso em)
Uno de los primeros problemas con los que te encontrarás remimplicará consultas de medios. Considere el siguiente código:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Aquí el valor de los remcambios depende de si se aplica la consulta de medios, y la consulta de medios depende del valor de rem, entonces, ¿qué está pasando?
remen las consultas de los medios de comunicación utiliza el valor inicial de font-sizey no debe (ver sección Safari) tener en cuenta cualquier cambio que pueda haber ocurrido a la font-sizedel :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 descubrí que las consultas de 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 CSS, puede usar mixins o variables para administrar sus consultas de medios, lo que enmascarará el problema por completo.
Safari
Desafortunadamente, hay un error conocido con Safari en el que los cambios en el :roottamaño de fuente realmente cambian los remvalores calculados para los rangos de consulta de medios. Esto puede causar un comportamiento muy extraño si el tamaño de fuente del :rootelemento se cambia dentro de una consulta de medios. Afortunadamente, la solución es simple: usar emunidades para consultas de medios .
Cambio de contexto
Si cambia entre varios proyectos diferentes, es muy posible que el tamaño de fuente aparente remtenga valores diferentes. En un proyecto, puede estar usando un tamaño aparente de 10pxdónde en otro proyecto podría ser el tamaño aparente 1px. Esto puede ser confuso y causar problemas.
Mi única recomendación aquí es seguir 62.5%para convertir rema 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 utilizará en un sitio que no controla, como un widget incorporado, realmente no hay una buena manera de saber qué tamaño aparente remtendrá. Si ese es el caso, siéntase libre de seguir usándolo px.
Sin embargo, si todavía desea usar rem, considere lanzar una versión Sass o LESS de la hoja de estilo con una variable para anular la escala para el tamaño aparente de rem.
* No quiero alejar a nadie del uso rem, pero no he podido confirmar oficialmente que todos los navegadores usan 16pxde forma predeterminada. Verá, hay muchos navegadores y no sería tan difícil para un navegador haber divergido tan levemente, digamos 15pxo 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 encuentra un ejemplo de este tipo, compártelo conmigo.
