todos - responsive css

Consultas de medios CSS: ancho máximo o máximo alto

Question

Al escribir una consulta de medios CSS, ¿hay alguna forma de especificar múltiples condiciones con la lógica "O"?

Estoy tratando de hacer algo como esto:

/* This doesn''t work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

Answer 1

Consultas de medios CSS y operadores lógicos: una breve descripción;)

La respuesta rápida.

Reglas separadas con comas: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

La respuesta larga.

Hay mucho aquí, pero he tratado de hacer que la información sea densa, no solo de escritura mullida. Ha sido una buena oportunidad para aprender yo mismo! Sin embargo, tómese el tiempo para leer sistemáticamente y espero que sea útil.

Preguntas de los medios

Las consultas de medios se utilizan esencialmente en el diseño web para crear experiencias de navegación específicas de dispositivos o situaciones; Esto se hace usando la declaración @media dentro del CSS una página. Esto se puede usar para mostrar una página web de manera diferente en una gran cantidad de circunstancias: si está en una tableta o TV con diferentes relaciones de aspecto, si su dispositivo tiene una pantalla a color o en blanco y negro o, quizás, con mayor frecuencia, cuando un usuario cambia el tamaño de su navegador o cambia entre dispositivos de navegación con diferentes tamaños de pantalla (en general, el diseño de este tipo se denomina Diseño web sensible )

Operadores logicos

Al diseñar para estas situaciones, parece que hay cuatro operadores lógicos que se pueden usar para requerir combinaciones más complejas de requisitos al apuntar a una variedad de dispositivos o tamaños de viewport .

(Nota: si no comprende las diferencias entre las reglas de medios, las consultas de medios y las consultas de funciones, primero busque la sección inferior de esta respuesta para familiarizarse un poco con la terminología asociada con la sintaxis de consulta de medios).

1. Y ( y palabra clave)

Requiere que todas las condiciones especificadas deben cumplirse antes de que las reglas de estilo tengan efecto.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Las reglas de estilo especificadas no se aplicarán a menos que todas las siguientes evalúen como verdaderas:

• El tipo de medio es ''pantalla'' y
• El viewport es de al menos 700px de ancho y
• La orientación de la pantalla es actualmente horizontal.

Nota: creo que al usarlas juntas, estas tres consultas de características conforman una única consulta de medios .

2. O ( listas separadas por comas )

En lugar de una palabra clave o , las listas separadas por comas se utilizan para encadenar varias consultas de medios para formar una regla de medios más compleja

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

Las reglas de estilo especificadas entrarán en vigencia una vez que una consulta de medios se evalúe como verdadera :

1. El tipo de medio es ''de mano'' o
2. El viewport es de al menos 650px de ancho o
3. La orientación de la pantalla es actualmente horizontal.

3. NO ( no palabra clave)

La palabra clave " no" se puede usar para negar una sola consulta de medios (y NO una regla de medios completa , lo que significa que solo niega las entradas entre un conjunto de comas y no la regla de medios completa después de la declaración de @media).

De manera similar, note que la palabra clave no niega las consultas de medios, no se puede usar para negar una consulta de función individual dentro de una consulta de medios. *

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

El estilo especificado aquí entrará en vigor si

1. El tipo de medio y la resolución mínima no cumplen con sus requisitos (''pantalla'' y ''300 ppp'' respectivamente) o
2. La ventana gráfica tiene al menos 800 píxeles de ancho.

En otras palabras, si el tipo de medio es "pantalla" y la resolución mínima es de 300 ppp, la regla no entrará en vigencia a menos que el ancho mínimo de la ventana gráfica sea de al menos 800 píxeles.

(La palabra clave no puede ser un poco extravagante de decir. Déjame saber si puedo hacerlo mejor.)

4. SOLO ( solo palabra clave)

Según tengo entendido, la única palabra clave se usa para evitar que los navegadores más antiguos interpreten erróneamente las consultas de medios más recientes como el tipo de medios más estrecho y usado anteriormente. Cuando se usan correctamente, los navegadores antiguos / no compatibles deberían ignorar el estilo por completo.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Un navegador antiguo / no compatible simplemente ignoraría esta línea de código por completo, creo que leería la única palabra clave y la consideraría un tipo de medio incorrecto. (Vea here y here para obtener más información de personas más inteligentes)

PARA MÁS INFORMACIÓN

Para obtener más información (incluidas más funciones que se pueden consultar), consulte: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Entendiendo la terminología de la consulta de medios

Nota: Necesitaba aprender la siguiente terminología para que todo aquí tenga sentido, particularmente en relación con la palabra clave no . Aquí está como lo entiendo:

Una regla de medios (MDN también parece llamar a estas declaraciones de medios) incluye el término @media con todas sus consultas de medios subsiguientes

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

Una consulta de medios es un conjunto de consultas de características. Pueden ser tan simples como una consulta de características o pueden usar la palabra clave y para formar una consulta más compleja. Las consultas de medios pueden estar separadas por comas para formar reglas de medios más complejas (consulte la palabra clave o más arriba).

screen (Nota: aquí solo se utiliza una consulta de características).

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

NO handheld, (min-width: 650px) . (Tenga en cuenta la coma: aquí hay dos consultas de medios).

Una consulta de características es la parte más básica de una regla de medios y simplemente se refiere a una característica dada y su estado en una situación de navegación determinada.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Fragmentos de código e información derivada de:

Consultas de medios CSS por parte de Mozilla Contributors (con licencia CC-BY-SA 2.5 ). Se utilizaron algunas muestras de código con alteraciones menores para (con suerte) aumentar la claridad de la explicación.

Answer 2

Hay dos formas de escribir una consulta de medios adecuada en css. Si está escribiendo consultas de medios para un dispositivo más grande primero, la forma correcta de escribir será:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

Pero si primero estás escribiendo consultas de medios para dispositivos más pequeños, entonces sería algo como:

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}

Answer 3

Use una coma para especificar dos (o más) reglas diferentes:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

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

... Además, puede combinar varias 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 estilo asociada. Esto es el equivalente de una operación lógica "o".