En CSS3, ¿cuál es la diferencia entre consultas de medios, pantalla y solo pantalla y?
El documento del W3C lo describe de esta manera: La?palabra?clave?'sólo'?también?puede?usarse?para?ocultar?hojas?de?estilo?de?agentes?usuarios?antiguos.?¿Usuario? ¿Los agentes?deben?procesar?consultas?de?medios?que?empezan?con?'sólo'?como?si?la?palabra clave?'única'?no?estaba?presente.
La traducción es: sólo significa que Si la hoja de estilo está oculta en los navegadores que admiten consultas de medios, el navegador solo la ignorará cuando procese palabras clave que comiencen con only.
@media?only?screen?y?(min-width:xxx)?and?(max-width:xxx)?AND?@media?screen?and?(min-width:xxx) ?y?(max-width:xxx)? son en realidad exactamente iguales en los navegadores que admiten consultas de medios. No hay diferencia porque solo se ignorarán. Sin embargo, en los navegadores que no admiten consultas de medios, dado que solo no hay ningún tipo de medio, esta consulta de medios se ignorará directamente. En los navegadores que no admiten consultas de medios, si solo no se agrega, @media?screen?and?(min-width:xxx)?and?(max-width:xxx) se analizará como @media?screen, obviamente no consistente con las expectativas. Por lo tanto, al agregar solo un tipo de medio que el navegador no reconoce, el navegador simplemente ignorará esta consulta de medios. media="only?screen?and?(min-width:?401px)?and?(max-width:?600px)"
/*? es igual a */ en navegadores que admiten consultas de medios
media="screen?and?(min-width:?401px)?and?(max-width:?600px)"
/*En navegadores que no admiten medios consultas Cuando una consulta de medios con only se analiza en el servidor, only se considerará como el tipo de medio. (Dado que no hay ningún tipo de medio de solo, no se aplicará)*/
media="only"
/*Si solo no está incluido, las consultas de medios no se aplicarán. compatible con el navegador*/
media="screen?and?(min-width:?401px)?and?(max-width:?600px)"
/*. se resolverá como pantalla, se aplicará a dispositivos de tipo pantalla*/
media="pantalla"