# Media Queries

{% embed url="<https://youtube.com/watch?v=kwr-TnUdUkc>" %}

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`:

```css
@media (min-width: 992px) {
  /* acá van las reglas que aplican cuando el ancho es de más de 992px */
}
```

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:

```css
/* por defecto va a ser amarillo  */
body {
  background-color: yellow;
}

@media (min-width: 992px) {
  // esto solo aplica si el ancho es de más de 992px
  body {
    background-color: red;
  }
}
```

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`:

```css
// mobile first
body {
  font-size: 14px;
}

// tabletas
@media (min-width: 768px) {
  body {
    font-size: 15px;
  }
}

// escritorio
@media (min-width: 992px) {
  body {
    font-size: 16px;
  }
}

// pantallas grandes
@media (min-width: 1200px) {
  body {
    font-size: 17px;
  }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://makeitrealcamp.gitbook.io/guias-de-make-it-real/html-y-css/media-queries.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.