Com a rápida popularidade dos dispositivos móveis, os usuários não usam mais apenas computadores tradicionais para navegar no conteúdo da Web. Cada vez mais usuários estão começando a usar smartphones, tablets ou outros dispositivos de vários tamanhos para navegar no conteúdo da Web. usuários de diferentes dispositivos podem ter uma boa experiência, eles precisam usar media queries.
A consulta de mídia é uma das funções mais importantes das folhas de estilo CSS. A chamada consulta de mídia refere-se à distinção de vários dispositivos (como computadores, telefones celulares, tablets, dispositivos Braille, etc.) com base em diferentes tipos de mídia (tipos de dispositivos). e condições e defina diferentes estilos CSS para eles, respectivamente. As consultas de mídia permitem que o CSS atue com mais precisão em diferentes dispositivos ou em diferentes condições no mesmo dispositivo, para que todos os usuários possam obter uma boa experiência de uso.
1. Tipo de mídia
Os tipos de mídia são usados para representar categorias de dispositivos. CSS fornece algumas palavras-chave para representar diferentes tipos de mídia, conforme mostrado na tabela a seguir:
2. Características da mídia
Além dos tipos específicos, características específicas do dispositivo também podem ser descritas através de alguns atributos, como largura, altura, resolução, etc., conforme tabela a seguir:
3. Operadores lógicos
Os operadores lógicos incluem not, and e only. Consultas de mídia complexas podem ser construídas por meio de operadores lógicos. Você também pode separar diversas consultas de mídia por vírgulas e combiná-las em uma regra.
e: Usado para combinar múltiplas consultas de mídia em uma consulta de mídia. Quando cada regra de consulta é verdadeira, a consulta de mídia é verdadeira. Além disso, o operador and também pode combinar características e tipos de mídia;
not: usado para negar consultas de mídia. Quando a regra de consulta não é verdadeira, ela retorna verdadeiro, caso contrário, retorna falso. Se o operador not for usado, o tipo de mídia também deverá ser especificado;
only: só terá efeito se toda a consulta corresponder. Quando only não for usado, os navegadores mais antigos simplesmente interpretarão a tela e (largura máxima: 500px) como tela, ignorarão o restante da consulta e aplicarão o estilo a todas as telas. Se você usar o operador only, também deverá especificar o tipo de mídia.
4. Defina consultas de mídia
Atualmente você pode definir consultas de mídia de duas maneiras:
Use as regras @media ou @import para especificar o tipo de dispositivo correspondente na folha de estilo;
Use o atributo media para especificar um tipo de dispositivo específico em um <style>, <link>, <source> ou outro elemento HTML.
(1)@mídia
Vimos brevemente @media na seção "CSS @Rules". Usando @media você pode especificar um conjunto de consultas de mídia e um bloco de estilo CSS se e somente se a consulta de mídia corresponder ao dispositivo que está sendo usado, o estilo CSS especificado. será aplicado ao documento. O código de exemplo é o seguinte:
/*Em telas menores ou iguais a 992 pixels, defina a cor de fundo como azul*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*Em telas de 600 pixels ou menos No tela, defina a cor de fundo como oliva */@mediascreenand(max-width:600px){body{background-color:olive;}}(2) @importar
@import é usado para importar um arquivo de estilo externo especificado e especificar o tipo de mídia de destino. O código de exemplo é o seguinte:
@importurl(css/screen.css)screen;/*Introduzindo estilos externos, este estilo só será aplicado a monitores de computador*/@importurl(css/print.css)print;/*Introduzindo estilos externos, este estilo só será aplicado ao dispositivo de impressão*/body{background:#f5f5f5;line-height:1.2;}Nota: Todas as instruções @import devem aparecer no início da folha de estilos e os estilos definidos na folha de estilos substituem os estilos conflitantes nas folhas de estilos externas importadas.
(3) atributo de mídia
Você também pode definir consultas de mídia nos atributos de mídia de <style>, <link>, <source> e outras tags. O código de exemplo é o seguinte:
/*Aplicar este estilo quando a largura da página for maior ou igual a 900 pixels*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*Aplicar este estilo quando a largura da página for menor que ou igual a 600 pixels*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
Dica: Você também pode especificar vários tipos de mídia no atributo media, usando vírgulas para separar cada tipo de mídia, por exemplo, media=screen, print.