Quiero mostrar el mismo conjunto de estilos de CSS a personas que imprimen la página (medios = impresión) y personas que navegan en un teléfono móvil. ¿Hay alguna manera de combinar consultas de medios CSS?Combinación de consultas de medios de CSS
Algo así como
@media only print or @media only screen and (max-device-width: 480px) {
#container {
width: 480px;
}
}
los separan con una coma:
@media only print, only screen and (max-device-width: 480px)
See the spec, en particular, el ejemplo VI (énfasis añadido):
Varias consultas de medios se pueden combinar en una lista consulta de medios. Una lista de consultas de medios separadas por comas . Si una o más de las consultas de los medios en la lista separada por comas son verdaderas, toda la lista es verdadera, y de lo contrario es falsa. En la sintaxis de consultas de medios, , la coma expresa un OR lógico O, mientras que la palabra clave 'y' expresa un AND lógico.
dudo que se necesita la segunda only, por lo que probablemente puede hacer:
@media only print, screen and (max-device-width: 480px)
El operador "único" se usa para aplicar un estilo solo si coincide con toda la consulta, lo que es útil para evitar que los navegadores más antiguos apliquen estilos seleccionados. Así que solo use coma ... por ejemplo: si desea aplicar un estilo cuando el dispositivo está en modo apaisado: @media (min-width: 700px) y (orientación: paisaje) {...} – Aruna
De https://developer.mozilla.org/en/CSS/Media_queries
Se pueden combinar múltiples preguntas de los medios en una lista separada por comas; si cualquiera de las consultas de medios en la lista es verdadera, se aplica la hoja asociada de estilo . Esto es el equivalente de una operación lógica "o".
Solo tiene que quitar el segundo @media y agregar algunos paréntesis.
relacionados: http://stackoverflow.com/questions/7668301/is-it-possible-to-embed -media-queries-within-media-queries –