css - font - title html

Cambio a consultas de medios basadas en em

Question

Ahora que el error de zoom de página de WebKit se ha fixed , ¿cuáles son las razones principales para utilizar consultas de medios basadas en em en lugar de consultas de medios basadas en píxeles?

Generosidad

Estoy agregando una recompensa a mi pregunta porque muchos frameworks destacados de CSS and developers web utilizan consultas de medios basadas en EM, y estoy convencido de que debe haber una buena razón para hacerlo.

La única ventaja que tengo en cuenta es que si un usuario cambia el tamaño de fuente predeterminado en su navegador, el contenido se developers de una manera similar al problema resuelto por la fixed . ¿Hay algún dato para mostrar que las personas realmente cambian el tamaño predeterminado en lugar del zoom?

Nota

Para hacer mi pregunta más enfocada, quité dos elementos periféricos. La publicación original agregará perspectiva a la gran answer @ nwalton, que abordó los tres puntos que pregunté.

Answer 1

1. En los navegadores modernos, no debe haber diferencia entre las consultas de medios basadas en em y en píxeles si el navegador maneja el zoom correctamente. De hecho, tuve problemas con las consultas de medios basadas en em en un proyecto porque en una de las consultas de medios el tamaño de la fuente base cambió y luego todas las demás consultas de medios se desordenaron. Eso puede haber sido un error estúpido, pero entiendes la idea. Yo iría con píxeles. Ver actualización a continuación. Si bien el zoom no tiene un efecto en los navegadores modernos, el tamaño de fuente base todavía lo tiene.

2. El mayor problema que veo que podría encontrar con la técnica de 62.5% y rem es si se encuentra con navegadores que no lo entienden. Si está preocupado por eso, podría agregar una alternativa para los navegadores menos capaces y establecer rem para los modernos.

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

3. Si hay alguna diferencia en la rapidez con la que los navegadores procesan px vs em , no se nota. Los navegadores calculan CSS realmente, muy rápido (mucho más rápido que JS). Así que probablemente no vale la pena preocuparse.

Medición de pros, contras y usos.

px

He usado px para consultas de medios en el pasado porque son muy confiables y, como usted dice, tienen un buen zoom. Actualización: Sin embargo, si un usuario cambia su hoja de estilo predeterminada, sus consultas de medios estarán desactivadas.

• Independiente de la cascada CSS
• Medida en su mayoría no relativa (solo depende de cómo el navegador mide los píxeles de la fuente)
• Zoomable en todos los navegadores modernos

em

Ems son impresionantes para hacer rejillas y medidas flexibles. Por ejemplo, si se especifica un ancho de contenedor en ems, puedo redimensionar proporcionalmente el contenedor y su contenido en mis consultas de medios con una declaración.

• Responde a la cascada de CSS
• Relativo al tamaño de fuente del contenedor
• Zoomable en todos los navegadores modernos

En este ejemplo, redimensionar la fuente también redimensiona su contenedor proporcionalmente.

h1.title {
  font-size: 2em;
  width: 20em;
  background-color: #baff1e;
}

@media (min-width: 400px) {
  h1 {
    font-size: 2.5em
  }
}

movimiento rápido del ojo

En realidad no he usado mucho rem , pero puedo ver por qué a mucha gente le gusta. Usted tiene el poder de una unidad relativa, pero no tiene que lidiar con las cosas locas que pueden suceder cuando lanza la cascada de CSS.

El tamaño de las cosas en función del tamaño de fuente de la base del navegador parece ser lo que deben hacer los estándares web, porque entonces se permiten los navegadores cuyo tamaño de fuente de base óptimo no sea 16px. En la práctica, sin embargo, funciona de la otra manera. Por lo que he visto, los navegadores usan 16px como el tamaño de fuente base porque eso es lo que todos esperan, y configuran el tamaño real de esa medición de CSS para que se vea decente en el navegador.

• Independiente de la cascada CSS
• Relativo al tamaño de fuente base
• Zoomable en todos los navegadores modernos

Una nota sobre la técnica del 62,5%.

Esto ha existido durante bastante tiempo, y en este momento no conozco ninguna razón para no usarlo. Hubo un artículo de 2007 en A List Apart donde realizaron algunas pruebas y encontraron que los tamaños de fuente se mostraban de manera más confiable en los navegadores cuando la fuente base se declaraba al 100% y el texto se dimensionaba en em . Pero me sorprendería si alguna de las restricciones del navegador enumeradas allí son realmente relevantes. Todavía me cuesta mucho sentirme bien al configurar mi tamaño de fuente base en 10px , pero eso es probablemente una preferencia personal.

Actualizar

Después de hacer algunas pruebas, estoy revirtiendo mi práctica de usar píxeles para consultas de medios. Ahora los estoy recomendando:

1. Los usuarios cambian su tamaño de fuente base. Un hilo en la red de soporte de Mozilla, "¿Cómo puedo aumentar el tamaño de fuente predeterminado del navegador?" Tiene más de 5,000 vistas. Y un hilo similar tiene más de 15.000. Otro estudio encontró un porcentaje de usuarios (0,3%) que tenían un tamaño de fuente predeterminado más pequeño o más grande que "medio". La frecuencia con la que los usuarios cambian realmente parece irrelevante (consulte una respuesta SO anterior ). Si algunas personas lo hacen, probablemente valga la pena apoyarlos.

2. Ems es probable que sea más a prueba de futuro. Funcionarán para cualquier dispositivo cuyo tamaño de fuente predeterminado óptimo no sea 16px (como los que lo son).

3. Lo que más me convenció fue verlo en acción. Aquí hay una demostración de codepen. Tenga en cuenta que el zoom del navegador probablemente no haga ninguna diferencia (lo probé en Chrome). Pero si realmente va a la configuración de su navegador y cambia el tamaño de fuente predeterminado de "medio" a otra cosa, los anchos están muy alejados. En mi opinión, esto es inaceptable.

Answer 2

Hay una razón principal por la que se usan consultas de medios basadas en EM y es la
respetar el tamaño de fuente de los usuarios (base)
¡Sin romper tu diseño!

Nunca deberías nunca definir los tamaños de fuente en píxeles (ni los elementos de ancho / alto).
Deje que el usuario decida qué tamaño de fuente le gusta ver en su sitio.

Así que es una cuestión de accesibilidad.

Si está utilizando valores de píxeles, debe asumir un cierto tamaño de fuente (base), que normalmente es de 16 píxeles. Pero no siempre, y ese es el punto. Entonces, si un usuario ha elegido un tamaño de fuente más pequeño o más grande (base), su diseño se desintegrará.

O en los sistemas de escritorio, si el usuario utiliza la función de zoom del navegador, obtendrá una barra de desplazamiento horizontal (que es en su mayoría no deseada).

Todo esto se puede evitar utilizando unidades relativas como los EMs . Y no tienen inconvenientes.

También vale la pena mencionar que, en realidad, la configuración del tamaño de fuente base, así como la función de zoom en los navegadores móviles (en dispositivos táctiles como tabletas y samrtphones) funcionan de manera diferente en comparación con sus contrapartes de escritorio. Para las versiones de navegador móvil, la configuración de tamaño de fuente no juega un papel tan importante como para los navegadores de escritorio. Pero una vez más, no haces nada mal al usar consultas de medios basadas en EM . Y, en mi opinión, esto está tan "preparado para el futuro" como sea posible.

Y también puedes usar fácilmente la "técnica del 62.5%".
Recuerda que el nuevo tamaño de fuente "raíz em" depende del tamaño de fuente del elemento raíz (de la página) y que es el elemento html , no el elemento del body .

Utilice la técnica "62.5%" sin romper la accesibilidad:

html {
    font-size: 62.5%; /* with the standard base font size of 16px this will be equal to 10px */
}

body {
    font-size: 160%; /* 160% of 10px ~ 16px, understood by all browsers */
    font-size: 1.6rem; /* 1.6 * 10px ~ 16px, understood by all major browsers and IE9+ */
}

Así que puedes usar rem como si fuera px (dividido por 10),
¡Pero sin dañar la configuración del usuario!

Independientemente del tamaño de fuente base que el usuario haya elegido, la proporción de fuente siempre permanecerá intacta.
Y también su diseño! ;-)

Una observación final:
¡Utilice siempre las consultas de medios de min|max-width y nunca device-width ! En resumen, la razón es que usted diseña y configura sus puntos de interrupción en función de su contenido y nunca de las resoluciones de ningún dispositivo.

Por lo tanto, al usar unidades relativas (como EMs ) para su diseño y tamaño de fuente, su diseño es realmente "sensible". ¡Al usar unidades absolutas (como PX ) no lo es!

Answer 3

Todavía no he encontrado ningún dato específico sobre los usuarios que cambian el tamaño de la fuente base, pero hice algunas comprobaciones en sitios web que han sido diseñados por personas que deberían saber lo que están haciendo. Estaba analizando específicamente si usaban px o em para especificar sus consultas de medios. Si bien esto puede no responder la pregunta por completo, creo que agrega alguna dimensión interesante a la discusión.

Algunos jugadores importantes

Esta lista no es de ninguna manera exhaustiva ni medida de ninguna manera, excepto que incluye los nombres de personas o grupos fuera de mi cabeza que parecen estar a la vanguardia del desarrollo web, o que han contribuido a la práctica de diseño responsivo de alguna manera.

• and : em
• Luke Wroblewski : em
• Jeffrey Zeldman : px
• Chris Coyier : em
• Ethan Marcotte (también conocido como The Father of Responsive Web Design ): px
• Jason Santa Maria : px
• Mark Boulton : px
• Nicholas Gallagher : px

Una cosa interesante a tener en cuenta es que la última entrada, Nicholas Gallagher, es la persona que agregó la línea de consulta de medios al HTML5 Boilerplate CSS . En ese código él usa em , aunque en su sitio personal las consultas de los medios se establecen en px . Busqué una discusión sobre ese compromiso, pero no pude encontrar ninguna.

Algunos de sus sitios

Una vez más, un poco de una lista dispersa, pero contiene algunos sitios que considero que vale la pena mirar. La mayoría de estos han sido creados en su totalidad o en parte por personas de la lista anterior.

• Boston Globe ( Filament Group , 2011): px
• Una lista aparte : em
• dribbble ( Dan Cederholm ): px
• HTML5 boilerplate : em
• HTML5 Mobile Boilerplate : px

Una nota interesante con HTML5 Boilerplate, el CSS del proyecto principal usa em mientras que la versión móvil del proyecto usa px .

Mega sitios

En realidad, fue realmente sorprendente cómo algunos de los sitios más populares en la web tienen alguna consulta de medios. Aquí hay algunos que utilizan consultas de medios.

• Microsoft : px
• Twitter : px
• Wordpress.com : em
• Adobe.com : px

Conclusión

Poco concluyente.

Parece que las personas están usando ambos métodos con éxito, y no parece haber acuerdo en cuanto a las mejores prácticas.

En cierto modo, tengo la sensación de que algunos de los diseñadores más progresistas se están moviendo hacia em , pero no tengo datos para eso que no sea "parece" que ese sea el caso. También podría ser cierto que algunos de los sitios mencionados anteriormente son más antiguos que otros, y no se han actualizado desde que las personas comenzaron a pasar a las consultas de medios basadas en EM. Es difícil realmente obtener suficientes datos para sacar una buena conclusión en ese frente.

Sin embargo, el hecho de que algunos de los sitios más grandes del mundo estén utilizando px me dice que este enfoque debe Todavía podría ser técnicamente sólido. Si hubiera problemas importantes con él, estoy seguro de que los sitios más grandes se habrían enterado por parte de sus usuarios o de sus pruebas, y se habrían mudado a algo más técnicamente viable para servir a sus audiencias.