Mudanças entre as edições de "CSS: media query"
(→Sintaxe) |
(→Sintaxe) |
||
| Linha 12: | Linha 12: | ||
</head> | </head> | ||
| − | O mais comum é a marcação de | + | O mais comum é a marcação de ''media queries'' no corpo da folha de estilo CSS, onde é possível demarcar as várias opções e condições de visualização. A marcação a seguir define a ''media query'' para tamanho de visualização maior que 800px (''max-width: 800px''). |
@media (max-width: 800px) | @media (max-width: 800px) | ||
| Linha 22: | Linha 22: | ||
} | } | ||
| − | Quando uma ''media query'' é verdadeira, a camada de estilo ou as regras de estilo correspondentes são | + | Quando uma ''media query'' é verdadeira, a camada de estilo ou as regras de estilo correspondentes são 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. | A menos que sejam definidos os operadores ''not'' ou ''only'', o ''media type'' é opcional e o tipo ''all'' será implícito. | ||
Edição das 11h17min de 11 de dezembro de 2021
Dentro da linguagem de marcação CSS, Media query é o recurso utilizado para determinar um conjunto de marcadores de estilo específico para exibir o mesmo conteúdo de um documento HTML em determinada medida de visualização da tela de um 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 (desktops, laptops, tablets, telefones celulares) 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 conforme a folha de estilo do projeto, permitindo que um mesmo conteúdo seja exibido de forma específica 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.
Uma das formas marcação da media query é defini-la no link de importação da folha de estilo CSS do documento HTML, no cabeçalho da página (<head>). O valor media define a media type que receberá a marcação da folha de estilo, no caso, de largura maior que 800px (max-width: 800px):
<html>
<head>
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
</head>
O mais comum é a marcação de media queries no corpo da folha de estilo CSS, onde é possível demarcar as várias opções e condições de visualização. A marcação a seguir define a media query para tamanho de visualização maior que 800px (max-width: 800px).
@media (max-width: 800px)
{
.facet_sidebar
{
display: none;
}
}
Quando uma media query é verdadeira, a camada de estilo ou as regras de estilo correspondentes são 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.
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;
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;
- é necessário especificar um tipo de media explícito.
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.
