Mudanças entre as edições de "CSS: media query"

De AleloWiki
Ir para: navegação, pesquisa
(and)
(and)
Linha 31: Linha 31:
  
 
*usado para combinar múltiplas ''media features'' em uma mesma ''media query'';
 
*usado para combinar múltiplas ''media features'' em uma mesma ''media query'';
 +
*permite combinar ''media features'' com ''media types''.
 
*requer que cada sequência de características retorne verdadeiro, na ordem, para que a ''query'' seja verdadeira;
 
*requer que cada sequência de características retorne verdadeiro, na ordem, para que a ''query'' seja verdadeira;
  
and
+
No exemplo a seguir apresenta uma ''media query'' básica, uma ''media feature'' simples com a media ''type all'':
A palavra-chave and é usada para combinar múltiplas media features, bem como combinar media features com media types. Uma media query básica, uma media feature simples com a media type all, pode parecer com isso:
 
  
 
  @media (min-width: 700px) { ... }
 
  @media (min-width: 700px) { ... }

Edição das 11h33min 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 a marcação de uma media query é verdadeira, a camada de estilo ou as regras de estilo correspondentes são aplicadas em "cascata" nos elementos definidos na estrutura do documento. Camadas de estilos com media queries ligadas a tag <link> são carregadas por download mesmo que a definição da media query retorne falso (não se aplique ao contexto).

Operadores lógicos

É possível a criação de media queries elaboradas com uso de operadores lógicos not, and, e only.

and

  • usado para combinar múltiplas media features em uma mesma media query;
  • permite combinar media features com media types.
  • requer que cada sequência de características retorne verdadeiro, na ordem, para que a query seja verdadeira;

No exemplo a seguir apresenta uma media query básica, uma media feature simples com a media type all:

@media (min-width: 700px) { ... }

Copy to Clipboard Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador and para deixar todas as media features juntas.

@media (min-width: 700px) and (orientation: landscape) { ... }

Copy to Clipboard Agora, a media query acima vai apenas retorna verdadeira se o viewport for 700px, wide ou wider e a tela estiver em landscape. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for media type TV, você pode encadear essas features com a media type usando o operador and.

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

Copy to Clipboard Agora, a media query acima vai ser aplicada apenas se a media type for TV, o viewport for 700px wide ou wider, e a tela estiver em paisagem.

not

  • usado para negar uma media query inteira;
  • usado para aplicar um estilo apenas se a query inteira for igual;
  • útil para prevenir 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: A menos que sejam definidos os operadores not ou only, o media type é opcional e o tipo all será implícito; é possível combinar múltiplas medias queries em uma lista separadas por vírgulas. Se qualquer uma das media queries da lista for verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador or.