22. Media Queries CSS

Tipos de medios introducidos en CSS2

La regla @media, introducida en CSS2, hizo posible definir diferentes reglas de estilo para diferentes tipos de medios. Ejemplos: puedes tener un conjunto de reglas de estilo para pantallas de computadora, uno para impresoras, uno para dispositivos de mano, uno para dispositivos de tipo televisión, etc.

Desafortunadamente, estos tipos de medios nunca recibieron mucho apoyo de los dispositivos, aparte del tipo de medios impresos.

CSS3 introdujo Media Queries

Las consultas de medios (Media Queries) en CSS3 ampliaron la idea de los tipos de medios de CSS2: en lugar de buscar un tipo de dispositivo, analizan la capacidad del dispositivo.

Las Media Queries se pueden usar para verificar muchas cosas, como:

  • ancho y alto de la ventana gráfica
  • ancho y alto del dispositivo
  • orientación (¿la tableta/teléfono está en modo horizontal o vertical?)
  • resolución

El uso de Media Queries es una técnica popular para entregar una hoja de estilo personalizada a equipos de escritorio, portátiles, tabletas y teléfonos móviles (como teléfonos iPhone y Android).

Sintaxis

Una Media Query consta de un tipo de medio y puede contener una o más expresiones, que se resuelven en verdadero o falso.

@media not|only mediatype and(expressions) {
  CSS-Code;
}

El resultado de la consulta es verdadero si el tipo de medio especificado coincide con el tipo de dispositivo en el que se muestra el documento y todas las expresiones de la consulta de medios son verdaderas. Cuando una Media Query es verdadera, se aplican la hoja de estilo o las reglas de estilo correspondientes, siguiendo las reglas en cascada normales. A menos que utilice los operadores not o only, el tipo de medio es opcional y el tipo all estará implícito. También puedes tener diferentes hojas de estilo para diferentes medios:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Tipos

ValorDescripción
allSe utiliza para todos los dispositivos de tipo de medios
printUsado para impresoras
screenSe utiliza para pantallas de computadora, tabletas, teléfonos inteligentes, etc.
speechSe utiliza para lectores de pantalla que «leen» la página en voz alta

Ejm sencillo

Una forma de usar consultas de medios es tener una sección CSS alternativa dentro de tu hoja de estilo. El siguiente ejemplo cambia el color de fondo a verde claro si la ventana gráfica tiene 480 píxeles de ancho o más (si la ventana gráfica tiene menos de 480 píxeles, el color de fondo será rosa).

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>
The media query will only apply if the media type is screen and the
viewport is 480px wide or wider.
</p>
</body>
</html>

El siguiente ejemplo muestra un menú que flotará a la izquierda de la página si la ventana gráfica tiene 480 píxeles de ancho o más (si la ventana gráfica tiene menos de 480 píxeles, el menú estará encima del contenido):

Ejm

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.wrapper {
overflow: auto;
}

#main {
margin-left: 4px;
}

#leftsidebar {
float: none;
width: auto;
}

#menulist {
margin: 0;
padding: 0;
}

.menuitem {
background: #cdf0f6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}

@media screen and (min-width: 480px) {
#leftsidebar {
width: 200px;
float: left;
}
#main {
margin-left: 216px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>

<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>
This example shows a menu that will float to the left of the page if
the viewport is 480 pixels wide or wider. If the viewport is less than
480 pixels, the menu will be on top of the content.
</p>
</div>
</div>
</body>
</html>

Media Queries para menús

En este ejemplo, usamos Media Queries para crear un menú de navegación Responsive, que varía en diseño en diferentes tamaños de pantalla.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<h2>Menú de navegación Responsive</h2>
<p>
Cambia el tamaño de la ventana del navegador para ver el efecto: cuando la
pantalla tiene menos de 600 px, el menú de navegación se mostrará
verticalmente en lugar de horizontalmente.
</p>
<div class="topnav">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</body>
</html>

Media Queries para columnas

Un uso común de las consultas de medios (Media Queries) es crear un diseño flexible. En este ejemplo, creamos un diseño que varía entre cuatro, dos y columnas de ancho completo, según los diferentes tamaños de pantalla.

Ejm

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 20px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}

/* On screens that are 600px wide or less, make the columns stack on top of
each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout</h2>
<p>
<strong>Resize the browser window to see the responsive effect.</strong>
On screens that are 992px wide or less, the columns will resize from four
columns to two columns. On screens that are 600px wide or less, the
columns will stack on top of each other instead of next to eachother.
</p>

<div class="row">
<div class="column" style="background-color: #aaa">
<h2>Column 1</h2>
<p>Some text..</p>
</div>

<div class="column" style="background-color: #bbb">
<h2>Column 2</h2>
<p>Some text..</p>
</div>

<div class="column" style="background-color: #ccc">
<h2>Column 3</h2>
<p>Some text..</p>
</div>

<div class="column" style="background-color: #ddd">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>

Website flexible

En este ejemplo, usamos consultas de medios junto con flexbox para crear un sitio web Responsive, que contiene una barra de navegación flexible y contenido flexible.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejm de página completa</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}

body {
font-family: arial;
margin: 0;
}

.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}

.navbar {
display: flex;
background-color: #333;
}

.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}

.navbar a:hover {
background-color: #ddd;
color: black;
}

.row {
display: flex;
flex-wrap: wrap;
}

.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}

.main {
flex: 70%;
background-color: white;
padding: 20px;
}

.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

.footer {
padding: 20px;
text-align: center;
background-color: #ddd;
}

@media screen and (max-width: 700px) {
.row,
.navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- NOTA -->
<div style="background-color: yellow; padding: 5px">
<h4 style="text-align: center">
Cambia el tamaño del navegador para ver el efecto
</h4>
</div>

<!-- HEADER -->
<div class="header">
<h1>Mi web</h1>
<p>Con un <b>Diseño flexible</b></p>
</div>

<!-- MENÚ DE NAVEGACIÓN -->
<div class="navbar">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>

<!-- CONTENIDO FLEXIBLE -->
<div class="row">
<div class="side">
<h2>Sobre mí</h2>
<h5>Foto de mí</h5>
<div class="fakeimg" style="height: 200px">Img</div>
<p>Algo de texto</p>
<h3>Mas texto</h3>
<p>Algo más de texto</p>
<div class="fakeimg" style="height: 60px">Img</div>
<div class="fakeimg" style="height: 60px">Img</div>
<div class="fakeimg" style="height: 60px">Img</div>
</div>
<div class="main">
<h2>Título principal</h2>
<h5>Descripción con fecha 18/07/2022</h5>
<div class="fakeimg" style="height: 200px">Img</div>
<p>Algo de texto</p>
<p>Algo mucho más de texto</p>

<h2>Título principal</h2>
<h5>Descripción con fecha 15/07/2022</h5>
<div class="fakeimg" style="height: 200px">Img</div>
<p>Algo de texto</p>
<p>Algo mucho más de texto</p>
</div>
</div>

<!-- FOOTER -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>

Min Width y Max Width

También puedes usar los valores (max-width: ..) y (min-width: ..) para establecer un ancho mínimo y un ancho máximo. Por ejemplo, cuando el ancho del navegador está entre 600 y 900 px, cambie la apariencia de un elemento <div>.

Ejm

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
</style>
</head>
<body>
<h2>Change the appearance of DIV on different screen sizes</h2>

<div class="example">Example DIV.</div>

<p>
When the browser's width is between 600 and 900px, change the appearance
of DIV. <strong>Resize the browser window to see the effect</strong>.
</p>
</body>
</html>
Scroll al inicio