4.1 Conceitos básicos
As variáveis do CSS e os media queries oferecem ferramentas poderosas para criar um design web responsivo, que se ajusta automaticamente a diferentes tamanhos de tela e dispositivos. As variáveis permitem gerenciar estilos de forma centralizada, e os media queries permitem alterar esses estilos com base em condições, como a largura da tela.
Conceitos básicos
- Variáveis do CSS: permitem definir valores que podem ser reutilizados em todo o código CSS. Elas podem ser alteradas em diferentes contextos, como media queries, o que as torna especialmente úteis para design responsivo.
- Media queries: permitem aplicar estilos CSS com base nas características do dispositivo, como largura ou altura da tela. Isso permite adaptar a aparência e o comportamento da página web para diferentes dispositivos.
Uso de variáveis em media queries
As variáveis do CSS podem ser usadas dentro dos media queries para alterar valores de estilo com base em condições. Isso permite criar designs responsivos mais flexíveis e fáceis de manter.
Exemplo de uso de variáveis em media queries:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
@media (max-width: 600px) {
:root {
--main-bg-color: #e0e0e0;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--main-bg-color: #d0d0d0;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--main-bg-color: #f0f0f0;
--font-size: 16px;
}
}
<body>
<p>Este é um parágrafo com um link para <a href="#">Example.com</a>.</p>
</body>
Explicação:
Neste exemplo, os valores das variáveis mudam dependendo da largura da tela:
- Para telas com largura até 600px, o fundo muda para um tom mais escuro e o tamanho da fonte diminui.
- Para telas com largura de 601px a 1200px, o fundo muda para um tom médio e o tamanho da fonte aumenta um pouco.
- Para telas com largura superior a 1200px, aplicam-se os valores originais das variáveis.
4.2 Exemplos de variáveis em media queries
Exemplo 1: Margens e tamanhos de fontes adaptativos
:root {
--padding: 20px;
--font-size: 16px;
}
.container {
padding: var(--padding);
font-size: var(--font-size);
}
@media (max-width: 600px) {
:root {
--padding: 10px;
--font-size: 14px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
:root {
--padding: 15px;
--font-size: 15px;
}
}
@media (min-width: 1201px) {
:root {
--padding: 20px;
--font-size: 16px;
}
}
<div class="container">
<p>Este é um container responsivo com margens e tamanho de fonte adaptativos.</p>
</div>
Explicação:
- Neste exemplo, o container
.containermuda suas margens e tamanho de fonte dependendo da largura da tela
Exemplo 2: Tematização do site usando variáveis e media queries
:root {
--bg-color: #ffffff;
--text-color: #000000;
--link-color: #3498db;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
--link-color: #9b59b6;
}
}
<body>
<p>Este texto e link irão se adaptar ao esquema de cores preferido do usuário. Visite <a href="#">Example.com</a>.</p>
</body>
Explicação:
-
Neste exemplo, o site muda o esquema de cores de acordo com as preferências do usuário (
prefers-color-scheme: dark). A cor de fundo, do texto e dos links mudam automaticamente ao alternar entre o tema claro e escuro.
4.3 Grid responsiva
Exemplo de uso de variáveis e media queries para grid responsiva:
:root {
--columns: 1fr;
--gap: 10px;
}
.grid-container {
display: grid;
grid-template-columns: var(--columns);
gap: var(--gap);
}
@media (min-width: 600px) {
:root {
--columns: 1fr 1fr;
}
}
@media (min-width: 900px) {
:root {
--columns: 1fr 1fr 1fr;
}
}
<div class="grid-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
Explicação:
- Neste exemplo, é utilizada uma grid responsiva que altera o número de colunas com base na largura da tela. Em telas estreitas (até 600px) a grid tem uma coluna, em telas médias (de 600px a 900px) duas colunas, e em telas largas (acima de 900px) três colunas.
GO TO FULL VERSION