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

375

Estoy diseñando un nuevo sitio web y quiero que sea compatible con tantos navegadores y configuraciones de navegador como sea posible. 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 los usuarios que ajustan el tamaño de fuente base en su navegador.
  • He ignorado los ems porque son más difíciles de mantener, en comparación con rems, ya que caen en cascada.
  • Algunos dicen que los rems son independientes de la resolución y, por lo tanto, más deseables. Pero otros dicen que los navegadores más modernos amplían todos los elementos por igual de todos modos, por lo que usar pxno es un problema.

Lo pregunto 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.

html css distance units-of-measurement TylerH
fuente
44
Este es un asunto de disputa y argumentación y opinión, no el tipo de preguntas técnicas en las que SO es bueno. Por cierto, la respuesta correcta es "No." ☺
Jukka K. Korpela
2
Incluso el comentario está desactualizado. El hecho de que el OP solicite la opinión correcta no significa que solo vamos a dar nuestra propia opinión. Casi 8 años después, esta pregunta muestra que todavía hay interés en cómo evoluciona el tema. Las respuestas actuales están fundamentadas y son lo suficientemente técnicas y NO son obstinadas. Por lo tanto, sugiero editar la palabra "opinión" a "experiencia" para que no caigamos en esta trampa de reabrir y cerrar la pregunta una y otra vez.
Tim Vermaelen
2
@TimVermaelen esta pregunta solo se ha cerrado una vez en su vida. El cambio realizado no fue sustantivo, ya que la respuesta todavía depende por completo del contexto que no se puede proporcionar a menos que OP edite la pregunta para preguntar sobre un escenario específico. No hay una "mejor" opción para todos los casos, por lo tanto, esta pregunta se basa en la opinión.
TylerH

Respuestas:

418

TL; DR: uso px.

Los hechos

  • Primero, es extremadamente importante saber que, según las especificaciones , la pxunidad CSS no equivale 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 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 pantalla Retina.

    Dicho esto, hasta 2010 (y a pesar de la situación del zoom móvil), pxcasi siempre igualaba 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 padre . Esto lleva al em"problema de capitalización", 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 htmlelemento raíz , 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 tener en cuenta a las personas con discapacidad visual. Una de esas consideraciones (¡pero no la única!) Es permitir a los usuarios hacer que el texto de su sitio sea más grande, 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 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 ampliar todo, incluidas las imágenes y los tamaños de los cuadros. Esencialmente, hacen que el píxel de referencia sea más grande o más pequeño.

Sí, alguien todavía podría cambiar su estilo por defecto del navegador para ajustar el tamaño de fuente por defecto (el equivalente a la opción tamaño de la fuente de estilo antiguo), pero eso es una manera muy esotérica de hacer las cosas y yo apuesto a que nadie 1 lo hace. (En Chrome, está oculto bajo la configuración avanzada, el contenido web, los tamaños de fuente. En IE9, está aún más oculto. Debe presionar Alt e ir a Ver, Tamaño de texto). Es mucho más fácil seleccionar la opción Zoom en el menú principal del navegador (o use Ctrl+ +/ -/ rueda del mouse).

1 - dentro del error estadístico, naturalmente

Si suponemos que la mayoría de los usuarios escalan las páginas usando la opción de zoom, encuentro que las unidades relativas son irrelevantes. Es mucho más fácil desarrollar su página cuando todo se especifica en la misma unidad (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" , se trata de tener que calcular lo que 1.5em realmente funciona).

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 ejecute demasiado tiempo. Si usa 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, su situación puede variar, y si debe admitir IE6 (que los dioses de los RFC tengan piedad de usted), tendrá que usar ems de todos modos.

josh3736
fuente
43
Deberías usar píxeles y rem. Entonces, los navegadores más nuevos obtienen rem y los navegadores antiguos vuelven a los píxeles (como lo hace WordPress 2012). Esto se puede automatizar con Sass o Less, por lo que todo lo que debe hacer es ingresar el valor de px y automáticamente genera px y rem.
cchiera
63
Mi gran objeción con este argumento es que al ajustar el tamaño de fuente y el espaciado en los puntos de corte receptivos, puede establecer un nuevo tamaño de fuente en el elemento html y cada medición que haya establecido en rem se ajustará automáticamente, mientras que con px deberá escribir nuevas reglas para cada medida que le gustaría ajustar. Por supuesto, probablemente se necesitarán más ajustes incluso cuando use rem, pero con una planificación inteligente obtendrá una gran cantidad de escala proporcional de forma gratuita. Atar ciertas medidas de espacio entre cajas para escribir, un código más ligero y menos complejidad / más facilidad de mantenimiento equivale a una clara victoria para mí.
RobW
16
Asumir que ningún usuario cambia la configuración del tamaño de fuente es bastante audaz. Tal reclamo debe estar respaldado con datos. De lo contrario, es solo una forma de alienar a algunos de los usuarios que ya son frágiles (personas con discapacidad visual). Si puede, use rem en lugar de px. En mi opinión, las aplicaciones deberían poder escalar independientemente su interfaz y el tamaño de fuente. "Solo usa px" es lo que muchos desarrolladores que luchan con el problema de ems quieren escuchar, pero no es la respuesta correcta para la web.
Olivvv
18
Sería genial tener un seguimiento de esto. Rem ahora tiene más del 95% de soporte.
Estadísticas de aprendizaje con el ejemplo del
10
Mal, no me importa IE (nadie debería).
Vahid Amiri
194

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

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

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

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

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.

zzzzBov
fuente
Sé que es tarde, pero me gusta la forma de usar REM, pero tengo más problemas para usar rem es cuando lo uso matrix()con javascript, que es el uso de valores de traducción matricial px(corrígeme si estoy equivocado), y estoy muy confundido con él .
Ampersanda
3
@Ampersanda, en JavaScript utilizarás en gran medida valores de píxeles calculados. Mi recomendación es alternar las clases cuando sea posible para que CSS pueda administrar cómo se ven las cosas. Para algunas cosas, no podrá evitar usar JS para calcular los valores de píxeles, por lo que su mejor opción es calcular el valor de píxeles desde el estado DOM.
zzzzBov
Ya veo, así que tengo que hacerlo, getComputedStyle()pero el resultado siempre está en píxeles, así que tengo que dividir el resultado por el remvalor (como 16). CMIIW
Ampersanda
@Ampersanda solo si realmente está generando un remvalor, si ya tiene el pxvalor correcto , no es necesario cambiar a remunidades para cosas que ya están calculadas para el contexto dado.
zzzzBov
1
tener 1rem igual a 1 px Esto causa problemas debido al tamaño de fuente mínimo de Chrome: stackoverflow.com/questions/44378664/… stackoverflow.com/questions/24200797/…
Paul
44

En este artículo se describe muy bien los pros y los contras de px, emy rem.

El autor finalmente concluye que el mejor método es probablemente usar ambos pxy rem, declarando pxprimero para navegadores antiguos y redeclarando rempara navegadores 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
fuente
1
Sí, es lo que me interesó en el rem en primer lugar. Dos cosas que no entiendo: solo lo aconseja como unidad de medida para las fuentes (no los elementos), y si lo entiendo correctamente, la única razón real para usar (r) em es para que los usuarios de IE puedan cambiar el tamaño del texto.
1
@ Samuel creo que sí. Si no fuera por cambiar el tamaño del texto, creo que preferiríamos usarlo px. En cuanto a la unidad de elementos, seguir pxsería mejor, ya que generalmente querría dimensionar elementos con precisión.
uzyn
Pero si haces eso, cualquier configuración del navegador que redefina el tamaño de fuente base arruinaría tu diseño, ¿verdad? ¿Por qué no rem para todo?
1
Como muchos comentarios señalan aquí que, la razón por la que necesitábamos deshacernos pxes para habilitar el cambio de tamaño. Ahora, si usamos rem, todavía tenemos que proporcionar pxrespaldo (en navegadores más antiguos). Esencialmente, lo que significa es que pxcambiar el tamaño del soporte es mejor que rem. Los navegadores más nuevos admiten el pxcambio de tamaño y para los navegadores más antiguos de cualquier manera que recurramos px. Ahora, a la luz de esta conclusión, estoy muy interesado en saber, ¿por qué usarlo rem? Si puedo ver la luz al final del túnel.
Fusionstrings 05 de
3
No hay garantía de que valores como 62.5% = 10px. Solo es cierto cuando el tamaño de fuente predeterminado del navegador se ha establecido en 16px. Si bien este es el valor predeterminado, no está garantizado.
cimmanon
7

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

Pero el soporte remoto es irregular, IE8 necesita un polyfill y Webkit exhibe 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 otros será no.

Por lo tanto, depende de sus necesidades, y debe sopesar los pros y los contras, porque el uso de rem y em introduce algunas consideraciones adicionales en comparación con el flujo de trabajo basado en píxeles "normal".

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;
}
Rolf
fuente
6

Sí, REM y PX son relativos, sin embargo, otras respuestas han sugerido optar por REM sobre PX, también me gustaría respaldar esto usando un ejemplo de accesibilidad.
Cuando el usuario establece diferentes tamaños de fuente en el navegador, REM escala automáticamente hacia arriba y hacia abajo elementos como fuentes, imágenes, etc. en la página web, que no es el caso con PX.

En el siguiente gif, el texto del lado izquierdo se configura con la unidad REM del tamaño de fuente, mientras que la fuente del lado derecho se configura con la unidad PX.

ingrese la descripción de la imagen aquí

Como puede ver, REM está aumentando / disminuyendo automáticamente cuando redimensiono el tamaño de fuente predeterminado de la página web (lado inferior derecho)

El tamaño de fuente predeterminado de una página web es 16px, que es igual a 1 rem (solo para la página html predeterminada, es decir html{font-size:100%}), por lo tanto, 1.25rem es igual a 20px.

PD: ¿quién más está usando REM? CSS Frameworks! como Bootstrap 4, Bulma CSS, etc., así que mejor llevate bien con él.

JerryGoyal
fuente
3

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

Recomiendo usar remunidades 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 moderno del navegador se ampliarápx unidades. Pero, ¿qué pasa si su jefe viene a usted y le dice "no amplíe las imágenes o los iconos, sino que haga que todas las fuentes sean más grandes". Es mucho más fácil simplemente cambiar el tamaño de la fuente raíz y dejar que todas las demás fuentes escalen en relación con eso, luego cambiar los pxtamaños en docenas o cientos de reglas CSS.

Creo que todavía tiene sentido usar px unidades para algunas imágenes, o para ciertos elementos de diseño que siempre deben ser del 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 a partir del 27 de marzo reclaman un soporte del 93.78% . Solo IE8 no lo admite entre los navegadores que rastrean.

Joshua Carmody
fuente
1
Only IE8 doesn't support it among the browsers they track.¿Eh? La página vinculada establece que "IE9 e IE10 no admiten unidades rem cuando se usan en propiedades de abreviatura de fuente o cuando se usan en pseudo elementos. IE9, 10 y 11 no admiten unidades rem cuando se usan en propiedades de altura de línea cuando se usan en: antes y después de pseudo elementos. Los bordes de tamaño real desaparecen cuando la página se aleja en Chrome. No funciona en el navegador Samsung Note II Android 4.3 y Samsung Galaxy Tab 2 en Android 4.2. Chrome 31-34 y Android basado en Chrome (como 4.4) tienen un error de tamaño de fuente que ocurre cuando el elemento raíz tiene un tamaño basado en porcentaje ".
e-sushi
Además, en relación con su as of March 27 they claim 93.78% support.En el momento de escribir este comentario, caniuse muestra solo un 91.79% de compatibilidad total con el navegador. Mirando su porcentaje, estoy bastante seguro de que también incluyó el soporte de navegador con errores (actualmente en 2.8%, que podría interpretarse como una cobertura general optimista de 94.6%, pero el hecho es que esos 2.8% vienen con errores, incompletos o incluso completamente no ayuda ... como se señala en mi comentario anterior: cada error es el resultado de diferentes versión del navegador y del sistema operativo combinaciones) Es posible que desee corregir su respuesta en consecuencia ....
e-sushi
1

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 bodyy luego usar em's (o rem's) para cualquier otro font-sizeque declare después de eso. Supongo que es una preferencia personal, pero me ha servido bien y también ha hecho que sea muy fácil incorporar un diseño más receptivo .

En cuanto 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 antiguos. Echa un vistazo a este enlace sobre el soporte del navegador para unidades rem , que debería ayudarte mucho en tu decisión.

cereallarceny
fuente
Okay. ¿Pero el diseño receptivo se hace con la misma facilidad con unidades px correctas (solo escriba sus consultas de medios basadas en px en lugar de em)?
Sin embargo, si desea reducir el tamaño de la fuente a medida que el ancho de la ventana de visualización de su sitio web se reduce, puede cambiar el bodytamaño de la fuente y todo cambia con ella.
cereallarceny
No estoy realmente preocupado por el soporte del navegador. Solo incluiré un tamaño de reserva de px para todos los tamaños, para que los navegadores más antiguos tengan algo que interpretar.
Luego ve por el camino progresivo usando rem's. Siempre que proporcione una reserva, entonces no veo ningún daño. Para mí, solo parece un trabajo extra, pero quizás no en tu situación.
cereallarceny
0

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

Si tuvieras esto:

html {
    font-size: 12pt;
}

entonces 1remsiempre lo sería 12pt. remy emson tan independientes del dispositivo como los elementos en los que se basan; algunos navegadores no se comportan de acuerdo con las especificaciones y se tratan pxliteralmente. Incluso en los viejos tiempos de la Web, 1 punto se consideraba constantemente como 1/72 de pulgada, es decir, hay 72 puntos en una pulgada.

Si tiene un navegador antiguo que no cumple con los requisitos y tiene:

html {
    font-size: 16px;
}

entonces 1remdependerá del dispositivo. Para los elementos que heredarían de htmlforma predeterminada, 1emtambién serían dependientes del dispositivo. 12ptsería la de esperar equivalente independiente del dispositivo garantizada: 16px / 96px * 72pt = 12ptdonde 96px = 72pt = 1in.

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

  • Uso ptpara tamaños absolutos. Si realmente necesita que esto sea dinámico en relación con el elemento raíz, está pidiendo demasiado CSS; necesita un lenguaje que compile a CSS, como Sass / SCSS.
  • Uso empara tamaños relativos. Es bastante útil poder decir: "Quiero que el margen de la izquierda sea aproximadamente del 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 usar 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 a la que se aplica h1: el tamaño de fuente se adaptará automáticamente.
  • Úselo pxpara tamaños muy pequeños. En tamaños muy pequeños, ptpuede aparecer borroso en algunos navegadores a 96 DPI, pty pxno se alinea del todo. Si solo desea crear un borde delgado de un píxel, dígalo. Si tiene una pantalla de alto DPI, esto no será obvio para usted durante la prueba, así que asegúrese de probar en una pantalla genérica de 96 DPI en algún momento.
  • No opere en subpíxeles para hacer que las cosas sean elegantes en pantallas de alto DPI. Algunos navegadores pueden admitirlo, particularmente en pantallas de alto DPI, pero es un no-no. La mayoría de los usuarios prefieren grande y claro, aunque la web nos ha enseñado a los desarrolladores lo contrario. Si desea agregar detalles extendidos para sus usuarios con pantallas de última generación, puede usar gráficos vectoriales (léase: SVG), lo que debería hacer de todos modos.
Zenexer
fuente
1
pt es para medios impresos y nunca debe usarse para pantallas
sf
@sf CSS define pt y px de modo que siempre tengan la misma proporción, a pesar de que no es un uso técnicamente preciso de esos términos (72pt = 96px = 1in). De hecho, en CSS, px no es realmente un solo píxel del dispositivo. En mi pantalla, 1 px es 2 píxeles del dispositivo. La ventaja de usar pt sobre px es que puede especificar fácilmente los tamaños de elementos en relación con los tamaños relacionados con el texto.
Zenexer
-2

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

Use vh

Todo siempre tiene el tamaño de 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 principal. Y diseñe solo usando tablas para que todo se mantenga rígidamente en su lugar como se esperaba. Incluya una función de JavaScript para deshacer cualquier actividad Ctrl +/- que el usuario pueda hacer.

Todos te odiarán, excepto las personas que te dicen que hagas que las cosas coincidan con su maqueta, y estarán extasiados. Y todos saben que su opinión es la única que importa.

liljoshu
fuente
-3

Si. O, más bien, no.

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

ACTUALIZAR:

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

Los PX a menudo se necesitan cuando se está adaptando un rediseño en una base de código existente y se necesita la especificidad de px para evitar problemas de anidamiento.

DA.
fuente
¿Entonces tu respuesta es que no importa? ¿O hay ciertas situaciones en las que valorarías una sobre la otra? Y si es así, ¿en qué situaciones sería este el caso?
@Samuel sí, puede haber ocasiones en las que quieras usar una u otra. He actualizado mi respuesta con más información.
DA.
Lo siento, me confundí un poco con la redacción original. Piensa que tenías REM en el título y EM en el cuerpo. Parece que estás preguntando específicamente sobre REM. La respuesta sigue siendo más o menos la misma, pero REM tiene algunos beneficios adicionales a considerar, pero se usa principalmente de la misma manera que EM: le permite usar un tamaño de fuente 'base'.
DA.
¿Por qué son " em [...] agradables si puedes empezar desde cero y quieres usar un tamaño de fuente base y hacer todo lo relativo a eso "? ¿Cuál es la ventaja de (r) em sobre px? ¿Es para que los usuarios de IE puedan cambiar el tamaño del texto, o hay otras ventajas sobre px (que parece ser más simple)?
EM y REM tienen el mismo beneficio: puede configurar HTML o BODY en un tamaño de fuente específico (digamos 10px) y luego configurar todo lo demás como EM o REM. De esa manera, si desea hacer que todo el tipo sea proporcionalmente más grande, simplemente cambie ese estilo inicial de 10px a 11px. Esto fue mucho más útil hace 5 años cuando todos estábamos construyendo nuestros propios widgets de cambio de tamaño de fuente basados ​​en JS personalizados. En estos días, los navegadores hacen un mejor trabajo al hacer zoom (especialmente en dispositivos móviles) que me resulta mucho menos beneficioso. Si considera que PX es más simple, entonces es un beneficio para usted y sin duda una razón válida para optar por PX.
DA.
-4

Los em son el camino a seguir, no solo para las fuentes, sino que también puede usarlas 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 medidas escalan, pero no tan limpiamente como un em.

En una nota al margen si desea lo mejor en escala, 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 de los navegadores.

ricura
fuente
3
Pero la mayoría de los navegadores hoy en día amplían todos los elementos de la página por igual (a menos que ajuste el tamaño de fuente base), por lo que la ventaja de usar (r) em no es cierto para los navegadores modernos, ¿verdad?
Es y no es, aunque es correcto en lo que dice, se trata más del factor de escala en lugar del delta de escala. El delta siempre será uniforme independientemente de la medición utilizada, pero el factor de escala (siempre que las matemáticas se realicen correctamente) se ajustará según sea necesario para, por ejemplo, un monitor de pantalla panorámica frente a un monitor estándar, o píxeles rectangulares frente a píxeles cuadrados. Debido REMS se basa realmente en una verdadera medición de impresoras a continuación, la ampliación será siempre un ajuste más agradable, otros (como%) son a menudo en el mejor de un delta compensados
Shawty
(cont.) con la multiplicación aplicada en ambas direcciones y, como resultado, en algunos casos puede dar una relación de visualización muy desproporcionada.
Shawty
2
"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". = eso es incorrecto.
DA.
Ok, podría haberlo redactado mejor, vea mi comentario anterior para la corrección.
Shawty
-5

Los EM son lo ÚNICO que escalan las consultas de medios que manejan el escalado +/-, 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 es importante.

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

robmuh
fuente
2
Esto no es realmente correcto. En los viejos tiempos, los píxeles no podían ampliarse en versiones antiguas de IE. +/- ahora hace un zoom de página completa en todos los navegadores actuales, por lo que esto no es un problema. Además, esta pregunta es sobre rems en lugar de px, no em vs px.
Rich Bradshaw
1
Ustedes chicos me hacen reir. ¿Has intentado escalar tu sitio usando +/- usando píxeles? La escritura sobre los píxeles que se van a hacer zoom está totalmente equivocada. Abajo votame todo lo que quieras. Los votos no cambian la realidad.
robmuh
1
Tal vez estamos tomando cosas ligeramente diferentes: ¿hay alguna posibilidad de que pueda publicar una demostración simple para demostrar la diferencia?
Rich Bradshaw
No creo que la pregunta es acerca de lo que las unidades a utilizar en las consultas de los medios de comunicación ...
binki