Media Queries

Search…
Media Queries
A través de media queries podemos ajustar nuestra página a diferentes dispositivos como tabletas, teléfonos inteligentes y televisores de gran tamaño. A esta técnica se le conoce como responsive design.
Con media queries podemos aplicar diferentes estilos de acuerdo a alguna característica de la pantalla (p.e. la resolución, el ancho o alto de la ventana del navegador, el tamaño del dispositivo, etc).
Generalmente se utiliza el ancho del navegador en pixeles (px) y existen algunos valores que nos pueden ayudar a determinar el tipo de dispositivo:
Si el ancho de la ventana es menor a 768px corresponde a teléfonos inteligentes.
Si es entre 768px y 992px corresponde a tabletas.
Si es entre 992px y 1200px corresponde a computadores de escritorio.
Si es mayor a 1200px corresponde a pantallas grandes.
A los puntos en los que cambia el contenido se les conoce como puntos de quiebre (breakpoints).
Nuestro primer media query
Para definir un media query utilizamos @media seguido de una expresión que define para qué dispositivos van a aplicar los estilos que estén dentro de ese media query.
Por ejemplo, el siguiente media query va a aplicar cuando el ancho del navegador supere los 992px:
1
@media (min-width: 992px) {
2
  /* acá van las reglas que aplican cuando el ancho es de más de 992px */
3
}
Copied!
Por ejemplo, si queremos que el fondo de nuestro documento sea amarillo en anchos menores a 992px y rojo en anchos iguales o mayores podemos hacer lo siguiente:
1
/* por defecto va a ser amarillo  */
2
body {
3
  background-color: yellow;
4
}
5
​
6
@media (min-width: 992px) {
7
  // esto solo aplica si el ancho es de más de 992px
8
  body {
9
    background-color: red;
10
  }
11
}
Copied!
Si el ancho es menor a 992px va a aplicar la regla que está por fuera del media query. Es como si el media query no existiera.
Cuando el ancho de la ventana es de 992px o más, la regla que está en el media query va a sobrescribir la que está definida por fuera del media query.
Mobile first
En mobile first las reglas CSS que están por fuera de media queries están dirigidas a teléfonos inteligentes y se utilizan media queries para ajustar el contenido a pantallas más anchas.
Veamos un ejemplo. Supongamos que queremos que en teléfonos inteligentes el tamaño de nuestra fuente sea de 14px, en tabletas de 15px, en computadores de escritorio 16px y en pantallas más grandes de 17px:
1
// mobile first
2
body {
3
  font-size: 14px;
4
}
5
​
6
// tabletas
7
@media (min-width: 768px) {
8
  body {
9
    font-size: 15px;
10
  }
11
}
12
​
13
// escritorio
14
@media (min-width: 992px) {
15
  body {
16
    font-size: 16px;
17
  }
18
}
19
​
20
// pantallas grandes
21
@media (min-width: 1200px) {
22
  body {
23
    font-size: 17px;
24
  }
25
}
Copied!
Bordes, sombras y gradientes
Flexbox
Last modified 4yr ago
Copy link
Contents
Nuestro primer media query
Mobile first