Media queries

<< Diseño adaptativo y responsive Pruebas en el navegador >>

Las medias queries son un tipo de reglas de CSS que nos van a permitir crear bloques de código. Estos bloques serán procesados en aquellos dispositivos que cumplan la siguiente regla:

@media [only | not] <media_type> <expresion1,expresion2, expresion3...>{
/* Estilos a aplicar para cuando se cumpla la regla */
}

media_type: corresponde al tipo de medio al que se van a aplicar esos estilos como screen(sólo en pantallas), print (cuando seleccionamos imprimir una web se aplicaría ese estilo. De forma habitual, el número de imágenes que se muestran al imprimir se reducen), o all(todos los dispositivos, por defecto está este valor). Ojo, porque antiguamente habían más tipos pero han sido deprecated.
<expressiones>: es una o varias condiciones que debe cumplir el dispositivo. Normalmente corresponde a su anchura máxima o mínima.

@media screen and (max-width: 639px){ /* width< 640 */
     .menu{
          /* Estilos a aplicar a los elementos que tengan la clase menu y su ancho de pantalla 
               del dispositivo sea como máximo 650px (móviles)*/
     }
}        
@media screen and (min-width: 640px) and (max-width: 1279px){ /* width >= 640 and width < 1280 */
     .menu{
          /* Estilos a aplicar a los elementos que tengan la clase menu y su ancho de pantalla 
               del dispositivo sea estén entre 1280px y 640px (tablets)*/
     }
}     
@media screen and (min-width: 1280px){ /* width >= 1280 */
     .menu{
          /* Estilos a aplicar a los elementos que tengan la clase menu y su ancho de pantalla 
               del dispositivo sea como máximo 650px (pantallas pc)*/
     }
}

@media (min-width: 768px){
     /* Estilos a aplicar para cuando se cumpla la regla */
}

No suele ser muy habitual el encontrarte reglas @media con la palabra clave not, que hace que se aplique la hoja de estilos cuando no se cumpla dicha regla.

Es importante recordar el meta que ponemos en el <head> de nuestra web, donde estamos indicando que el ancho de la pantalla es el ancho del dispositivo, por lo que el aspecto del viewport se va a adaptar:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Además de esta forma de indicar los media queries, tenemos la posibilidad de indicarlos en el link y que cada link apunte a un archivo css diferente, por ejemplo para el caso anterior:

<link rel="stylesheet" href="movil.css" media="screen and (max-width: 639px)">
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 640px) and (max-width: 1279px)">
<link rel="stylesheet" href="screen.css" media="screen and (min-width: 1280px)">

Una buena práctica es definir los estilos que serán comunes a cualquier resolución junto con los estilos para la resolución más baja o más alta, y luego poner en los media queries las características que para el resto de resoluciones.

<section id="container">
     <section id="section1">section 1</section>
     <section id="section2">section 2</section>
</section>

Por ejemplo, imaginad que en el section de nuestro HTML tenemos dos sections y queremos que para los móviles se muestren una debajo de otra pero para pantallas mayores que se muestren en paralelo. El primer paso será definir el estilo general y el estilo para los dispositivos móviles:

*{
     padding: 0px;
     margin: 0px;
}
#container{
     margin: 10px 5%;
}
#section1{
     background-color: red;
     padding: 10px;
     border: 1px solid black;
}      
#section2{
     background-color: blue;
     padding: 10px;
     border: 1px solid black;
}

El siguiente paso será definir el estilo para el resto de pantallas que no son móviles (tablets y pc), que como en este caso serán las dos sections una al lado de otra en ambos casos sería:

@media (min-width: 768px){
     #container{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: auto;
          gap: 10px;
     }
}

Por último, dentro de este punto indicar que tenemos la posibilidad para detectar ciertas preferencias de usuario dependiendo del dispositivo, sistema operativo o navegador que utiliza. Estas preferencias son: prefers-color-scheme, prefers-contrast, prefers-reduced-motion y prefers-reduced-data.

<< Diseño adaptativo y responsive Pruebas en el navegador >>