Responsive
CSS Media Queries Los tipos de medios/dispositivos Condiciones viewport o región visible Anchos de pantalla dependiendo del tamaño

<< ¿Qué unidad uso? CSS container queries >>

Cuando estamos trabajando para que nuestro diseño web se adapte a todos los dispositivos, vemos que no todos tienen los mismos tamaños o características, en estos casos nos va a ser muy útil el uso de media queries.

CSS Media Queries

@media (<condiciones>) {
    .elemento {
        /* ... */
    }
}

@media not (<condiciones>) {
    .elemento {
        /* ... */
    }
}

En el caso de cumplirse la condición que viene dada en la regla @media pasaría a establecerse ese estilo para .elemento, en el caso se establecería el estilo de la regla @media not. Se podría ve como el típico if-else que conocemos de programación

El parámetro <condiciones> que recibe la regla @media, nos permite una o varias condiciones utilizando los operadores lógicos not, and, only y or.

El operador lógico only aplica para que aquellos navegadores antiguos que no “entienden” dicho operador lógico no la procesen. Only debe ir seguido del media type al que se aplica: only screen, only print.

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
    body {
        line-height: 1.4;
    }
}

Los tipos de medios/dispositivos

all: Todos los dispositivos o medios, es el que se utiliza por defecto.
screen: monitores o pantallas de ordenador
print: documentos de medios impresos o pantallas de previsualización antes de imprimir.

Podemos encontrar otros medios como tty, tv, projection, handheld, braille, embossed, y aural pero a día de hoy han sido deprecated con Media queries v4, y por tanto no deberían ser usados.

Condiciones

width: Si el tamaño de la pantalla del dispositivo coincide con el width
min-width:Si el tamaño de la pantalla del dispositivo tiene un tamaño de ancho mayor al indicado
max-width: Si el tamaño de la pantalla del dispositivo tiene un tamaño de ancho menor al indicado.
height: Si el tamaño de alto del dispositivo es exactamente el height
min-height: Si el tamaño de alto del dispositivo es mayor a lo indicado
max-height: Si el tamaño de alto del dispositivo es menor a lo indicado
aspect-ratio: Si el dispositivo encaja con la proporción de aspecto indicada
orientation: Si el dispositivo está en modo landscape o portrait

Además de estos, podemos utilizar una modalidad llamada media query range syntax que no es más que el uso de los operadores matemáticos(=, <, <=, >, >=) que conocemos y que nos harán nuestro código más legible y fácil de interpretar.

@media only screen and (320px <= width <= 480px) and (resolution = 150dpi) {
    body {
        line-height: 1.4;
    }
}

viewport o región visible

No debemos olvidarnos que la etiqueta html meta name="viewport" nos permite indicarle al navegador que vamos a usar diseño responsive, y que por tanto el nuevo ancho de la pantalla pasará a ser el ancho del dispositivo, y el aspecto del viewport se adaptará.

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

Por último, indicar que si queremos tener para cada dispositivo un archivo css diferente, podemos hacer uso a la etiqueta link en el html con la condición media.

<link rel="stylesheet" href="mobile.css" media="(max-width: 640px)">
<link rel="stylesheet" href="tablet.css" media="(min-width: 640px) and (max-width: 1280px)">
<link rel="stylesheet" href="desktop.css" media="(min-width: 1280px)">

Anchos de pantalla dependiendo del tamaño

Apartados de esta sección

CSS container queries

Preferencias de usuario