Introducción a las Media Queries en CSS
Existe un comando especial @media,
que permite ejecutar código diferente
dependiendo del ancho de la pantalla.
En el siguiente ejemplo, cierto código se activará
si el ancho de la pantalla está entre 300px y
1200px:
@media (min-width: 300px) and (max-width: 1200px) {
/* cierto código */
}
En el siguiente ejemplo, cierto código se activará
si el ancho de la pantalla es mayor a 300px:
@media (min-width: 300px) {
/* cierto código */
}
En el siguiente ejemplo, cierto código se activará
si el ancho de la pantalla es menor a 1200px:
@media (max-width: 1200px) {
/* cierto código */
}
Escribamos en nuestra media query algún código. Por ejemplo, para ciertos tamaños de pantalla, colorearemos los párrafos en rojo:
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
@media (min-width: 300px) and (max-width: 1200px) {
p {
color: red;
}
}
Y ahora colorearemos los párrafos en diferentes colores dependiendo del ancho de la pantalla:
@media (max-width: 300px) {
p {
color: red;
}
}
@media (min-width: 300px) and (max-width: 900px) {
p {
color: green;
}
}
@media (min-width: 900px) and (max-width: 1200px) {
p {
color: blue;
}
}
@media (min-width: 1200px) {
p {
color: orange;
}
}
Que el siguiente código se aplique en una pantalla
con un ancho entre 0 y 800px:
p {
font-size: 20px;
}
Y que el siguiente código se aplique en una pantalla
con un ancho de 800px o más:
p {
font-size: 30px;
}
Que el siguiente código se aplique en una pantalla
con un ancho entre 0 y 500px:
p {
font-size: 15px;
}
Que el siguiente código se aplique en una pantalla
con un ancho entre 500px y 900px:
p {
font-size: 20px;
}
Que el siguiente código se aplique en una pantalla
con un ancho de 900px o más:
p {
font-size: 30px;
}