Mudanças entre as edições de "CSS: media query"
(→Sintaxe) |
(→Operadores lógicos) |
||
| Linha 24: | Linha 24: | ||
==Operadores lógicos== | ==Operadores lógicos== | ||
| − | É possível | + | É possível a criação de ''media queries'' elaboradas a partir do uso dos operadores lógicos ''not'', ''and'', e ''only''. |
| − | + | *Operador ''and'': | |
| − | + | *usado para combinar múltiplas ''media features'' em uma mesma ''media query''; | |
| + | *requer que cada sequência de características retorne verdadeiro, na ordem, para que a ''query'' seja verdadeira; | ||
| − | + | *Operador ''not'': | |
| − | + | *usado para negar uma ''media query'' inteira; | |
| + | *usado para aplicar um estilo apenas se a ''query'' inteira for igual; | ||
| + | *útil para previnir que navegadores antigos apliquem os estilos selecionados; | ||
| + | *ao usar os operadores ''not'' ou ''only'', é necessário especificar um tipo de media explícito. | ||
| + | |||
| + | *Observação: é possível combinar múltiplas ''medias queries'' em uma lista separadas por vírgulas. Se qualquer uma das ''media queries'' da lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador ''or''. | ||
Edição das 22h42min de 8 de dezembro de 2021
Dentro da linguagem de marcação CSS, Media query é o recurso utilizado para determinar o conjunto de marcadores de estilo específico para exibir um mesmo conteúdo Web em determinada medida de visualização da tela de dispositivos de exibição. O recurso Media query é muito utilizado para a construção de sítios Web responsivos, onde a cada tipo de dispositivo de exibição, o conteúdo seja adaptado para melhor visualização do usuário. Marcadores de exibição de elementos de página, como largura, altura, cores, estilos e tamanho de fontes de texto, por exemplo, podem ser definidos a cada Media query definida na folha de estilo do projeto, permitindo que um mesmo conteúdo seja exibido de forma peculiar a cada dispositivo utilizado.
Sintaxe
Media queries consistem formas de media type e podem conter uma ou mais expressões que determinam se são verdadeiras ou falsas uma determinada especificação CSS3 expressa em media features. Os resultados de uma query são verdadeiros se o tipo de media type especificado na media query corresponde ao tipo do documento exibido no dispositivo e todas as expressões na media query são verdadeiras.
<nolink><!- CSS media query em um elemento de link -></nolink>
<nolink><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /></nolink>
<nolink><!- CSS media query dentro de um stylesheet -></nolink>
<style>
@media (max-width: 600px)
{
.facet_sidebar
{
display: none;
}
}
</style>
Quando uma media query é verdadeira, a camada de estilo ou as regras de estilo correspondentes são aplicadas seguindo o padrão de regras aplicadas em "cascata". Camadas de estilos com media queries ligadas a tag <link> são carregadas por download mesmo que suas medias queries retornem falso (caso não se aplicam ao contexto).
A menos que sejam definidos os operadores not ou only, o media type é opcional e o tipo all será implícito.
Operadores lógicos
É possível a criação de media queries elaboradas a partir do uso dos operadores lógicos not, and, e only.
- Operador and:
- usado para combinar múltiplas media features em uma mesma media query;
- requer que cada sequência de características retorne verdadeiro, na ordem, para que a query seja verdadeira;
- Operador not:
- usado para negar uma media query inteira;
- usado para aplicar um estilo apenas se a query inteira for igual;
- útil para previnir que navegadores antigos apliquem os estilos selecionados;
- ao usar os operadores not ou only, é necessário especificar um tipo de media explícito.
- Observação: é possível combinar múltiplas medias queries em uma lista separadas por vírgulas. Se qualquer uma das media queries da lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.
