Responsive
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
