Con la rápida popularidad de los dispositivos móviles, los usuarios ya no solo usan computadoras tradicionales para navegar por contenido web. Cada vez más usuarios están comenzando a usar teléfonos inteligentes, tabletas u otros dispositivos de varios tamaños para navegar por contenido web. Los usuarios de diferentes dispositivos pueden tener una buena experiencia, necesitan utilizar consultas de medios.
La consulta de medios es una de las funciones más importantes de las hojas de estilo CSS. La llamada consulta de medios se refiere a distinguir varios dispositivos (como computadoras, teléfonos móviles, tabletas, dispositivos Braille, etc.) en función de diferentes tipos de medios (tipos de dispositivos). y condiciones, y definir diferentes estilos CSS para ellos respectivamente. Las consultas de medios permiten que CSS actúe con mayor precisión en diferentes dispositivos o en diferentes condiciones en el mismo dispositivo, para que todos los usuarios puedan obtener una buena experiencia de usuario.
1. Tipo de medio
Los tipos de medios se utilizan para representar categorías de dispositivos. CSS proporciona algunas palabras clave para representar diferentes tipos de medios, como se muestra en la siguiente tabla:
2. Características de los medios
Además de los tipos específicos, las características específicas del dispositivo también se pueden describir a través de algunos atributos, como ancho, alto, resolución, etc., como se muestra en la siguiente tabla:
3. Operadores lógicos
Los operadores lógicos incluyen no, y solo. Se pueden construir consultas de medios complejas mediante operadores lógicos. También puede separar varias consultas de medios mediante comas y combinarlas en una sola regla.
y: se utiliza para combinar varias consultas de medios en una consulta de medios. Cuando cada regla de consulta es verdadera, la consulta de medios es verdadera. Además, el operador y también puede combinar características y tipos de medios;
not: se utiliza para negar consultas de medios. Cuando la regla de consulta no es verdadera, devuelve verdadero; de lo contrario, devuelve falso. Si se utiliza el operador not, también se debe especificar el tipo de medio;
only: solo tendrá efecto si toda la consulta coincide. Cuando only no se usa, los navegadores más antiguos simplemente interpretarán la pantalla y (ancho máximo: 500 px) como pantalla, ignorarán el resto de la consulta y aplicarán el estilo a Todas las pantallas. Si utiliza el único operador, también debe especificar el tipo de medio.
4. Definir consultas de medios
Actualmente puedes definir consultas de medios de dos maneras:
Utilice las reglas @media o @import para especificar el tipo de dispositivo correspondiente en la hoja de estilo;
Utilice el atributo multimedia para especificar un tipo de dispositivo específico en un <estilo>, <enlace>, <fuente> u otro elemento HTML.
(1)@medios
Hemos visto brevemente @media en la sección "CSS @Rules". Usando @media puedes especificar un conjunto de consultas de medios y un bloque de estilo CSS si y solo si la consulta de medios coincide con el dispositivo que se está utilizando, el estilo CSS especificado. se aplicará al documento. El código de muestra es el siguiente:
/*En pantallas de menos de 992 píxeles o iguales, establezca el color de fondo en azul*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*En pantallas de 600 píxeles o menos En el pantalla, establezca el color de fondo en oliva */@mediascreenand(max-width:600px){body{background-color:olive;}}(2) @importar
@import se utiliza para importar un archivo de estilo externo específico y especificar el tipo de medio de destino. El código de muestra es el siguiente:
@importurl(css/screen.css)screen;/*Introduciendo estilos externos, este estilo solo se aplicará a monitores de computadora*/@importurl(css/print.css)print;/*Introduciendo estilos externos, este estilo solo aplicado al dispositivo de impresión*/body{background:#f5f5f5;line-height:1.2;}Nota: Todas las declaraciones @import deben aparecer al principio de la hoja de estilos, y los estilos definidos en la hoja de estilos anulan los estilos en conflicto en las hojas de estilos externas importadas.
(3) atributo de medios
También puede definir consultas de medios en los atributos de medios de <estilo>, <enlace>, <fuente> y otras etiquetas. El código de muestra es el siguiente:
/*Aplicar este estilo cuando el ancho de la página sea mayor o igual a 900 píxeles*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*Aplicar este estilo cuando el ancho de la página sea menor que o igual a 600 píxeles*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
Consejo: También puede especificar varios tipos de medios en el atributo de medios, utilizando comas para separar cada tipo de medio, por ejemplo, medios=pantalla, imprimir.