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

De AleloWiki
Ir para: navegação, pesquisa
(Sintaxe)
(Sintaxe)
Linha 3: Linha 3:
 
==Sintaxe==
 
==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 <!-- CSS media query em um elemento de link -->
+
''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
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
 
  
<nolink>
+
<nolink>
 +
<!-- CSS media query em um elemento de link -->
 +
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
 
  <!-- CSS media query dentro de um stylesheet -->
 
  <!-- CSS media query dentro de um stylesheet -->
 
 
  <style>
 
  <style>
 
  @media (max-width: 600px)
 
  @media (max-width: 600px)
Linha 18: Linha 18:
 
  }
 
  }
 
  </style>
 
  </style>
</nolink>
+
</nolink>
  
 
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).
 
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).

Edição das 21h32min 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

<nolink>
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<style>
@media (max-width: 600px)
{
 .facet_sidebar
  {
   display: none;
  }
}
</style>
</nolink>

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).