A consulta @media do CSS3 é um recurso poderoso que nos permite aplicar diferentes regras de estilo com base em diferentes tipos de mídia e características de dispositivos. Isso nos permite criar designs responsivos que garantem que o site ou aplicativo ofereça uma ótima experiência ao usuário em uma variedade de dispositivos e tamanhos de tela. Este artigo discutirá detalhadamente a definição, sintaxe, cenários de uso e problemas comuns da consulta @media.
As regras @media do CSS3 permitem que você aplique diferentes regras de estilo com base no tipo e nas propriedades da mídia. Tipo de mídia (tipo de mídia), como screen (tela), print (impressão), etc., enquanto recursos de mídia (recursos de mídia), como width , height , orientation etc., são usados para descrever as características específicas do dispositivo.
A sintaxe básica da consulta @media é a seguinte:
@media mediatype e | não | somente (recurso de mídia) {
/* Regras CSS*/
}screen , print , etc. Se omitido, o padrão é todos os tipos de mídia. recurso de mídia : defina condições para recursos e valores de mídia, como min-width , max-width , orientation , etc.Nas consultas @media, você pode usar os seguintes operadores lógicos para combinar condições de mídia:
e : Indica que todas as condições devem ser atendidas. not : indica que o estilo é aplicado quando a condição não é atendida. only : Usado para evitar que navegadores mais antigos que não suportam consultas de mídia apliquem estilos. Vírgula : indica que o estilo é aplicado quando qualquer uma das múltiplas condições for atendida.1. Defina estilos de acordo com o tamanho da tela
@media screen e (largura mínima: 600px) {
corpo {
cor de fundo: azul claro;
}
}Quando a largura da tela for de pelo menos 600 pixels, a cor de fundo da página muda para azul claro.
2. Design responsivo
@media screen e (largura máxima: 800px) {
.contêiner {
largura: 100%;
}
}
@media screen e (largura mínima: 801px) {
.contêiner {
largura: 750px;
}
}Altere a largura do contêiner com base na largura da tela para um design responsivo.
3. Estilo de impressão
@impressão de mídia {
corpo {
tamanho da fonte: 12pt;
cor: preto;
fundo: branco;
}
}Defina estilos específicos de impressão, como tamanho da fonte, cor e plano de fundo.
4. Telas horizontais e verticais
@media screen e (orientação: paisagem) {
#barra lateral {
exibição: nenhum;
}
}Oculte a barra lateral quando o dispositivo estiver no modo paisagem.
CSS3 fornece uma variedade de recursos de mídia. Aqui estão alguns recursos comumente usados:
width , min-width , max-width : Defina a largura da área visível da página no dispositivo de saída. height , min-height , max-height : Define a altura da área visível da página no dispositivo de saída. orientação : Defina a orientação do dispositivo, comoportrait (tela vertical) e landscape (tela horizontal). resolução : Define a resolução do dispositivo. color , color-index : Define os recursos de cores e o índice de cores.min-width e max-width como condições de julgamento, você deve garantir que o intervalo de condições seja classificado de pequeno para grande ou de grande para pequeno para evitar problemas de cobertura de estilo. Conflitos de estilo : certifique-se de que os estilos nas consultas @media não sejam substituídos pelas regras CSS subsequentes. Recomenda-se escrever o estilo de consulta @media no final. Meta tag : defina <meta name="viewport" content="width=device-width, initial-scale=1.0"> para garantir que os dispositivos móveis possam renderizar a página corretamente. Erro de sintaxe : certifique-se de que a sintaxe da consulta @media esteja correta, principalmente o espaço após o operador lógico e não escreva o terminador ";" entre colchetes.A consulta @media do CSS3 é uma ferramenta importante para a criação de designs responsivos, permitindo-nos aplicar diferentes regras de estilo com base em diferentes tipos e propriedades de mídia. Ao aproveitar as consultas @media, podemos garantir que nosso site ou aplicativo ofereça uma ótima experiência ao usuário em uma variedade de dispositivos e tamanhos de tela. Espero que este artigo possa ajudá-lo a entender e usar melhor as consultas @media.
Isso conclui este artigo sobre a consulta @media em CSS3. Para obter mais conteúdo de consulta CSS3 @media, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relevantes abaixo.