¿Qué es una consulta de medios?
consulta de medios es una técnica CSS introducida en CSS3.
Utiliza el @media regla para incluir un bloque de propiedades de CSS sólo si una determinada condición es verdadera.
Ejemplo
Si la ventana del navegador es más pequeña que 500 píxeles, el color de fondo cambiará a azul claro:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Inténtalo tú mismo " Añadir un punto de interrupción
Al principio de este tutorial hemos hecho una página web con filas y columnas, y era sensible, pero no se veía bien en una pantalla pequeña.
Las consultas de medios pueden ayudar con eso. Podemos añadir un punto de interrupción en ciertas partes del diseño se comportan de manera diferente en cada lado del punto de interrupción.
Escritorio
Teléfono
Utilice una consulta de medios para agregar un punto de ruptura en 768px:
Ejemplo
Cuando la pantalla (ventana del navegador) se hace más pequeño que 768px, cada columna debe tener una anchura de 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Inténtalo tú mismo " Siempre de diseño para móvil Primera
En primer móvil significa diseñar para móviles antes de diseñar para el escritorio o cualquier otro dispositivo (Esto hará que la visualización de la página más rápido en los dispositivos más pequeños).
Esto significa que tenemos que hacer algunos cambios en nuestro CSS.
En lugar de cambiar estilos cuando el ancho de 768px se hace más pequeño, hay que cambiar el diseño cuando el ancho de 768px se hace más grande. Esto hará que nuestro diseño móvil Primero:
Ejemplo
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Inténtalo tú mismo " otro punto de interrupción
Puede añadir tantos puntos de ruptura como desee.
También vamos a insertar un punto de ruptura entre las tabletas y los teléfonos móviles.
Escritorio
Tableta
Teléfono
Hacemos esto mediante la adición de una mayor consulta de medios (a 600px), y un conjunto de nuevas clases de dispositivos de más de 600px (pero más pequeño que 768px):
Ejemplo
Tenga en cuenta que los dos conjuntos de clases son casi idénticos, la única diferencia es el nombre ( col- y col-m- ):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
} Inténtalo tú mismo " Podría parecer extraño que tenemos dos conjuntos de clases idénticas, pero nos da la oportunidad en HTML, para decidir qué va a pasar con las columnas en cada punto de interrupción:
Ejemplo HTML
Por escritorio:
La primera y la tercera sección se tanto abarcar 3 columnas cada una. La sección central tendrá una duración de 6 columnas.
Para los comprimidos:
La primera sección tendrá una duración de 3 columnas, la segunda tendrá una duración de 9, y la tercera sección se mostrará debajo de las dos primeras secciones, y tendrá una duración de 12 columnas:
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>Orientación: Vertical / Horizontal
Las consultas de medios también se pueden utilizar para cambiar el diseño de una página dependiendo de la orientación del navegador.
Puede tener un conjunto de propiedades de CSS que sólo se aplica cuando la ventana del navegador es más ancho que su altura, lo que se denomina orientación "horizontal":
Ejemplo
La página web tiene un fondo azul claro si la orientación es en modo horizontal:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Inténtalo tú mismo "