# Funcionamiento del diseño adaptable
El diseño *responsive* se basa en adaptar dinámicamente el diseño web en función de la resolución de la pantalla del visitante. De esta forma adaptamos nuestras webs a dispositivos móviles sin necesidad de tener dos sitios separados y al mismo tiempo también podemos adaptar la web a resoluciones grandes para mejorar la experiencia de usuario.
Antiguamente se pensaba en hacer 2 diseños, uno para móviles y otro para web, sin embargo, el diseño *responsive* trata de estructurar o adaptar el contenido que ya tienes en el diseño original a otros formatos diferentes: móviles, *tablets* y versión de escritorio, como bien muestra esta imagen:
La solución técnica que se le ha dado en el desarrollo web al problema de esta diversidad de resoluciones web se llama *Responsive Web Design* y nos permite hacer interfaces adaptadas al entorno del usuario mediante estructuras, bloques, columnas e imágenes fluidas gracias a *media-queries* de CSS.
A partir de CSS 2.1 las hojas de estilo han incluido los *media types*, lo cual nos ha facilitado, por ejemplo, proveer un estilo distinto para el diseño de impresión:
```markup
```
A partir de CSS 3 el W3C creó las *media queries*. Una media query nos permite apuntar no sólo a ciertas clases de dispositivos, sino realmente inspeccionar las características físicas del dispositivo que está renderizando nuestro trabajo. Para utilizarlas podemos incorporar una *query* al atributo media de un *link* a una hoja de estilos:
```markup
```
La *query* contiene dos componentes:
* Un media type (*screen*, *print* o *all*).
* La consulta entre paréntesis, conteniendo una característica a inspeccionar (max-device-width o min-device-width) seguida por el valor al que apuntamos (480px).
También es posible utilizarlas directamente en el CSS como parte de una regla `@media`:
```markup
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
```
Por ejemplo, si quisiéramos crear un estilo de bloques *fluidos* que para pantallas grandes se muestre uno a continuación del otro y para pantallas pantallas cambie a mostrarse de forma apilada, uno encima de otro, podríamos hacer algo como:
```markup
@media all and (max-width: 800px) {
.bloque{
display: block !important;
/* Cuando el ancho sea inferior a 800px el elemento será un bloque */
width: auto !important;
}
}
.bloque {
display: inline-block; /* Para que se muestren los bloques en línea */
height:300px;
width: 300px;
border:1px solid #333;
background: #999;
margin:20px;
}
```
Para más información podéis consultar:
---
# 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://ajgallego.gitbook.io/bootstrap-4/introduccion/introduccion-funcionamiento.md?ask=
```
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.