Table of contents
Media queries - más ejemplos
Veamos algunos ejemplos más del uso de @media queries.
Las @media queries son una técnica popular para entregar una hoja de estilo personalizada a diferentes dispositivos. Para demostrar un ejemplo simple, podemos cambiar el color de fondo para diferentes dispositivos:
Ejemplo:
/* Set the background color of body to tan */
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
¿Te preguntas por qué usamos exactamente 992px y 600px? Son lo que llamamos "puntos de interrupción típicos" para dispositivos. Puedes leer más sobre los puntos de interrupción típicos (
breakpoints) en nuestro tutorial de diseño web responsive.
Media queries para menu
En este ejemplo, usamos media queries para crear un menú de navegación responsive, que varía de diseño en diferentes tamaños de pantalla.
Ejemplo:
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Media queries para columnas
Un uso común de 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:
Ejemplo:
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* 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%;
}
}
Tip: Una forma más moderna de crear diseños de columnas es usar CSS Flexbox (vea el ejemplo a continuación). Sin embargo, no es compatible con Internet Explorer 10 y versiones anteriores.
Ejemplo
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 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) {
.row {
flex-direction: column;
}
}
Ocultar elementos con media queries
Otro uso común de las media queries es ocultar elementos en diferentes tamaños de pantalla:
Ejemplo:
/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Cambiar tamaño de la fuente con media queries
También puedes usar los media queries para cambiar el tamaño de fuente de un elemento en diferentes tamaños de pantalla:
Ejemplo:
/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Galería de imágenes flexibles
En este ejemplo, usamos media queries junto con flexbox para crear una galería de imágenes receptivas:
Ejemplo:
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
Sitio web flexible
En este ejemplo, usamos media queries junto con flexbox para crear un sitio web responsive, que contiene una barra de navegación flexible y contenido flexible.
Ejemplo:
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
Orientación: Portrait/Landscape
Los media queries también se pueden usar para cambiar el diseño de una página según la orientación del navegador.
Puedes tener un conjunto de propiedades CSS que solo se aplicarán cuando la ventana del navegador sea más ancha que su altura, una orientación denominada "landscape":
Ejemplo:
Use un color de fondo azul claro de la orientación en modo horizontal:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Ancho mínimo & ancho máximo
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 600px y 900px, cambie la apariencia de un elemento <div>:
Ejemplo:
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Usando un valor adicional: en el ejemplo a continuación, agregamos un media queries adicional a la que ya existe usando una coma (esto se comportará como un operador OR):
Ejemplo:
/* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Referencias @media CSS
Para obtener una descripción general completa de todos los tipos de media queries y características/expresiones, consulte la regla @media en nuestra referencia de CSS.
Tip: Para obtener más información sobre el diseño web responsive (cómo dirigirse a diferentes dispositivos y pantallas), utilizando puntos de interrupción de consulta de medios, lea nuestro Tutorial de diseño web responsive.
Traducido con 💚 desde W3Schools.com