Preguntas de los medios
Las consultas de medios son una característica de CO que permiten página web contenido para adaptarse a diferentes tamaños y resoluciones de pantalla. Son una parte fundamental de diseño web adaptable y se utilizan para personalizar la apariencia de sitios web para múltiples dispositivos.
Se pueden insertar consultas de medios dentro de una página web HTML o incluido en un separado .CSS archivo al que hace referencia la página web. A continuación se muestra un ejemplo de una consulta de medios simple:
@media screen y (max-width: 768px)
{
encabezado {altura: 70px; }
artículo {font-size: 14px; }
img {ancho máximo: 480px; }
}
La consulta de medios anterior se activa si el usuario navegador la ventana es 768 píxeles de ancho o menos. Esto podría suceder si reduce su ventana en una computadora de escritorio o si está utilizando un dispositivo móvil, como un tableta, para ver la página web.
En el diseño web receptivo, las consultas de medios actúan como filtros para diferentes tamaños de pantalla. Al igual que todos los módulos dentro de una hoja de estilo en cascada, los que aparecen más abajo en la lista anulan los que están sobre ellos. Por lo tanto, la Por defecto los estilos generalmente se definen primero dentro de un documento CSS, seguidos de las consultas de medios para diferentes tamaños de pantalla. Por ejemplo, los estilos de escritorio pueden definirse primero, seguidos de una consulta de medios con estilos para usuarios de tabletas, seguida de una consulta de medios diseñada para teléfono inteligente usuarios. Los estilos también se pueden definir en el orden opuesto, lo que se considera desarrollo "móvil primero".
Definitivamente el min-width es, con mucho, la característica más común utilizada en las consultas de medios, y muchas otras también están disponibles. Ejemplos incluyen min-dispositivo-ancho, altura mínima del dispositivo, relación de aspecto, max-color-index, resolución máxima, orientación y resolución. La resolución el valor, por ejemplo, se puede usar para detectar pantallas HiDPI (como pantallas de retina) y cargue gráficos de alta resolución en lugar de imágenes estándar.