Usamos un puñado de consultas de medios para entregar diferentes hojas de estilos a diferentes dispositivos, para crear puntos de interrupción sensibles para nuestros diseños e interfaces. Estos puntos de interrupción se basan principalmente en anchos mínimos de ventana gráfica y nos permiten aumentar la escala de los elementos a medida que cambia la ventana gráfica.
Bootstrap utiliza principalmente los siguientes rangos de consulta de medios, o puntos de interrupción, en nuestros archivos Sass de origen para nuestro diseño, sistema de cuadrícula y componentes.
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Consultas de medios para cambiar el color de fondo
Copie el código a continuación y guárdelo con la extensión .htm y cambie el tamaño de la ventana del navegador para ver el efecto
Ejemplos:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#008000;
color: black;
}
/* On screens that are 992px wide or less,
the background color is green */
@media screen and (max-width: 992px) {
body {
background-color: #008000;
color: black;
}
}
/* On screens that are 600px wide or less,
the background color is yellow */
@media screen and (max-width: 600px) {
body {
background-color: Yellow;
color: Pink;
}
}
</style>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h1>Resize the browser window to see the effect!</h1>
<p>By default, the background color of
the document is "green".</p>
<p> If it is 600px or less,
it will change to "Yellow".</p>
</body>
</html>
After Resizing the window we get:
Similarly, Media queries can be used in different places
- Consultas de medios para columnas
- Consultas de medios para menús
- Cambiar el tamaño de fuente con consultas de medios
- Orientación: Retrato / Paisaje, etc.
Publicación traducida automáticamente
Artículo escrito por SachinDiwakar1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA