¿La consulta de medios CSS usa el tamaño de em del documento html en lugar del navegador?

Question

Estoy tratando de usar consultas de medios para cambiar el ancho de un elemento en fragmentos en función del ancho de la ventana (esto me permite aumentar el número de columnas en la página sin cambiar el ancho de las columnas). Me gustaría poder hacer esto usando em's en lugar de píxeles para que todo se vea bien si cambias el tamaño de la fuente. Sin embargo, si utilizo el siguiente:

html { 
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/ 
} 

@media screen and (min-width: 42em) { 
    div#page { 
     width: 42em; 
    } 
} 

La consulta de medios se activará cuando la anchura mínima de la ventana alcanza los 42 * 16 píxeles, el tamaño de fuente predeterminado para mi navegador (Safari), mientras que la anchura de la div # la página será 42 * 12px, heredando el tamaño de fuente del elemento html. Realmente me gustaría que las consultas de los medios se activen en función del ancho del texto que estoy usando, ¿hay alguna manera de hacerlo funcionar?

Answer 1

No, no se puede, porque en una consulta de medios, “unidades relativas en las consultas de medios se basan en el valor inicial, lo que significa que las unidades no se basan en los resultados de las declaraciones. Por ejemplo, en HTML, la unidad 'em' es relativa al valor inicial de 'font-size'. "(Especificación de Media Query, cláusula 6 Units). El valor inicial de font-size es medium, que se asigna a un tamaño físico de una manera dependiente del navegador (independientemente de cualquier cosa que pueda establecer en CSS).

Las conclusiones dependen de cómo se establece el tamaño de la fuente. Si está configurando el tamaño de fuente del elemento raíz en píxeles, es lógico usar píxeles en consultas de medios, ya que el uso de em no proporcionaría ninguna flexibilidad. Si establece el tamaño de fuente del elemento raíz como un porcentaje, tiene sentido utilizar em en consultas de medios, pero solo debe tener en cuenta que em significa el tamaño de fuente predeterminado del navegador y debe seleccionar el multiplicador de em en consecuencia.

Answer 2

De W3C (http://www.w3.org/TR/CSS21/syndata.html)
La unidad 'em' es igual al valor computado de la propiedad 'font-size' del elemento de cual es usado La excepción es cuando 'em' aparece en el valor de la propiedad 'tamaño de fuente', en cuyo caso se refiere al tamaño de fuente del elemento padre.

html { font-size:1em; width:42em; } 
body { font-size:1.6em; } 

@media screen and (max-width:40em) { 
    div#page { font-size:0.875em; } /* 14px font */ 
} 

Nota: 42em probablemente nunca sea del 100% del ancho de la ventana del navegador. Si cambia @media para actuar de manera diferente para diferentes anchos de pantalla (max-width:1200px), (max-width:1024px), probablemente obtendrá más efecto que creo que busca.

Answer 3

He estado buscando lo mismo, y AFAIK no hay forma de alterar el tamaño de letra "nativo" del navegador/dispositivo; pero esto es realmente bueno si lo miras de cierta manera.

La consulta de medios y la etiqueta html --si están establecidas en unidades relativas-- hacen referencia al mismo número base en cualquier dispositivo o navegador (en el caso de los navegadores de escritorio es 16px, pero puede ser diferente en otros dispositivos o si el usuario cambia su zoom).

Así que si configura el tamaño de texto html en un porcentaje o em-medida de este valor (para el equivalente de escritorio de 12px, use 75% o 0.75em), y luego configure sus consultas de medios basadas en dividir el píxel ancho por este valor (para el equivalente de escritorio de 960px, use 60em), todo debe ubicarse en cada dispositivo en cada nivel de zoom.

Ver también este link