Solución:
TL; DR: usar px.
Los hechos
-
Primero, es extremadamente importante saber que por especificación, el CSS
pxunidad no igual a un píxel de visualización física. Esto tiene siempre 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 del
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), el
pxcasi siempre era igual a un píxel físico, porque todas las pantallas ampliamente disponibles tenían alrededor de 96 ppp. -
Tamaños especificados en
ems son relativos al elemento padre. Esto lleva a laemEl “problema de la composición” 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 solo a la raízhtmlelement, ahora es compatible con el 96% de todos los navegadores en uso.
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 tener 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 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 IE7 no tan moderno) cambiaron el método de escala predeterminado para simplemente hacer zoom en todo, incluidas las imágenes y el tamaño de los 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 ajustar 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 nadie1 lo hace. (En Chrome, está enterrado debajo de la configuración avanzada, el contenido web, los 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 seleccionar la opción Zoom en el menú principal del navegador (o utilice control++/-/rueda de 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” – se trata de tener que calcular lo que realmente equivale a 1,5 em).
Otro problema potencial de usar solo 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 puede hacer que el texto se recorte o se prolongue demasiado. Si usa unidades absolutas, no tiene que preocuparse de que los tamaños de fuente inesperados rompan su diseño.
Entonces mi respuesta es usar unidades de píxeles. yo suelo px para todo. Por supuesto, su situación puede variar, y si debe apoyar IE6 (que los dioses de los RFC tengan piedad de usted), tendrá que usar ems 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 era la respuesta correcta, pero eso ya no es cierto hoy.
tl; dr: usar rem
Descripción general de la unidad
Históricamente px las unidades representaban típicamente un píxel del dispositivo. Con dispositivos que tienen una densidad de píxeles cada vez más alta, esto ya no es válido para muchos dispositivos, como con la pantalla Retina de Apple.
rem las unidades representan el root em Talla. Es el font-size de lo que sea que coincida :root. En el caso de HTML, es el <html> elemento; para SVG, es el <svg> elemento. El valor por defecto font-size en todos los navegadores * es 16px.
En el 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 son además apoyado por aproximadamente el 98% de los usuarios.
Sobre el uso px
La mayoría de los ejemplos de CSS en Internet utilizan px valores porque eran el estándar de facto. pt, in y una variedad de otras unidades podría se han utilizado en teoría, pero no manejaban bien los valores pequeños, ya que rápidamente tendría 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 necesitarías usar 0.75pt para obtener resultados consistentes, y eso no es muy conveniente.
Sobre el uso rem
remel valor predeterminado de 16px no es un argumento muy fuerte para su uso. Escribiendo 0.0625rem es peor que escribir 0.75pt, entonces, ¿por qué alguien usaría rem?
Hay dos partes para remVentaja sobre otras unidades.
- Se respetan las preferencias del usuario
- Puedes cambiar lo aparente
pxvalor derema 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 se escalarían 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 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 lugar. Solo porque un navegador está configurado para 16px de forma predeterminada, no significa que ningún usuario no pueda cambiar sus preferencias a 24px o 32px para corregir la baja visión o la mala visibilidad (ex deslumbramiento 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á 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 ajustado a 32px en un 640px amplio navegador, efectivamente verá su sitio como se muestra a un usuario en 16px en un 320px amplio navegador. No hay absolutamente ninguna pérdida para RWD al usar rem.
Cambiando Aparente px Valor
Porque rem se basa en el font-size de El :root nodo, si quieres cambiar lo 1rem representa, todo lo que tienes 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 el :root elementos font-size a un px valor.
Si configura el font-size sobre html a un px valor, ha destruido las preferencias del usuario sin una forma de recuperarlas.
Si desea cambiar el aparente valor de rem, usar % unidades.
Las matemáticas para esto son razonablemente sencillas.
El aparente tamaño de fuente de :root es 16px, pero digamos que queremos cambiarlo a 20px. Todo lo que tenemos que hacer es multiplicar 16 por algún valor para conseguir 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>Haciendo 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 cual 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 porque el resto de la página está configurada de forma demasiado pequeña, pero hay una solución simple para eso: establece un font-size sobre body utilizando rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}<p>I'm the default font-size</p>Es importante tener en cuenta, con este ajuste en su lugar, el valor aparente de rem es 10px lo que significa cualquier valor que haya escrito en px se puede convertir directamente a rem golpeando un lugar 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 ninguna razón por la que no pueda usar:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
y tiene 1rem igual 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 truco?
Temía que pudieras preguntar eso. Por mucho que me gustaría fingir que rem es mágico y resuelve-todo-las-cosas, todavía hay algunas cuestiones a destacar. Nada que rompa el trato en mi opinión, pero voy a llamarlos para que no puedas decir que no te lo advertí.
Consultas de medios (use em)
Uno de los primeros problemas con los que te encontrarás rem implica 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 rem cambia dependiendo de si se aplica la consulta de medios, y la consulta de medios depende del valor de rem, entonces, ¿qué diablos está pasando?
rem en las consultas de medios utiliza el valor inicial de font-size y no debe (ver la sección de Safari) tenga en cuenta cualquier cambio que pueda haber ocurrido en el font-size de El :root elemento. 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 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á usando un preprocesador de 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 :root tamaño de fuente realmente cambia el calculado rem valores para rangos de consulta de medios. Esto puede causar un comportamiento muy extraño si el tamaño de fuente del :root El elemento se cambia dentro de una consulta de medios. Afortunadamente, la solución es simple: use em unidades para consultas de medios.
Cambio de contexto
Si cambia entre proyectos varios proyectos diferentes, es muy posible que el tamaño de fuente aparente de rem tendrá diferentes valores. En un proyecto, es posible que esté utilizando un tamaño aparente de 10px donde en otro proyecto el tamaño aparente podría ser 1px. Esto puede resultar confuso y causar problemas.
Mi única recomendación aquí es seguir 62.5% para convertir rem a un tamaño aparente de 10px, porque eso ha sido mas 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 incrustado, realmente no hay una buena manera de saber qué tamaño aparente rem tendrá. Si ese es el caso, no dude en seguir usando px.
Si todavía quieres usar rem sin embargo, considere la posibilidad de publicar 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 cada usos del navegador 16px por defecto. Verá, hay muchos navegadores y no sería tan difícil para un navegador haber divergido tan levemente, 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 tenga un valor diferente a 16px. Si encuentra un ejemplo de este tipo, compártalo conmigo.
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 utilizar ambos px y rem, declarando px primero para 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 */