css - w3schools - media query min and max

Combinando consultas de medios de CSS

Question

Quiero mostrar el mismo conjunto de estilos CSS para las personas que imprimen la página (medios = impresión) y las personas que navegan en un teléfono móvil. ¿Hay alguna manera de combinar consultas de medios CSS?

Algo como

@media only print or @media only screen and (max-device-width: 480px) {
  #container {
    width: 480px;
  }
} 

Answer 1

Desde https://developer.mozilla.org/en/CSS/Media_queries

Puede combinar múltiples consultas de medios en una lista separada por comas; si alguna de las consultas de medios en la lista es verdadera, se aplica la hoja de estilos asociada. Esto es el equivalente de una operación lógica "o".

Solo tiene que eliminar el segundo @media y agregar algunos paréntesis.

Answer 2

Separalos con una coma:

@media only print, only screen and (max-device-width: 480px)

Ver la especificación , en particular, el ejemplo VI (énfasis añadido):

Varias consultas de medios se pueden combinar en una lista de consulta de medios. Una lista de consultas multimedia separadas por comas. Si una o más de las consultas de medios en la lista separada por comas son verdaderas, toda la lista es verdadera y, de lo contrario, falsa. En la sintaxis de consultas de medios, la coma expresa un OR lógico , mientras que la palabra clave ''y'' expresa un AND lógico.

Dudo que sea necesario el segundo, así que probablemente puedas:

@media only print, screen and (max-device-width: 480px)