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