Utilização de media queries para criar layouts responsivos
Ao criar um site ou página da web, é fundamental que o conteúdo se adapte a diferentes tamanhos de tela, como computadores, tablets e smartphones.
A criação de um layout responsivo é a chave para garantir uma experiência agradável e eficaz para os usuários, independentemente do dispositivo que eles estejam usando.
Uma das principais ferramentas para alcançar esse objetivo é a utilização de media queries.
As media queries são uma funcionalidade do CSS3 que permite aplicar estilos específicos com base nas características do dispositivo de visualização, como largura da tela, orientação e densidade de pixels.
Com as media queries, podemos criar regras de estilo condicionais que se aplicarão somente quando determinadas condições forem atendidas.
A estrutura básica de uma media query é a seguinte:
@media tipo-de-midia e (condição) {
/* Estilos a serem aplicados quando a condição for atendida */
}
O “tipo-de-midia” pode ser screen para telas de computadores, print para impressão, speech para dispositivos de leitura de texto, entre outros.
A “condição” é onde definimos as características do dispositivo em que desejamos aplicar os estilos.
Por exemplo, podemos usar a largura da tela para ajustar o layout em diferentes resoluções.
Exemplo de media query para ajustar o tamanho da fonte em telas menores:
body {
font-size: 16px;
}
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
Neste exemplo, o tamanho da fonte do corpo (body) é definido como 16 pixels. Porém, quando a largura da tela for igual ou menor que 768 pixels, a media query será ativada e o tamanho da fonte será alterado para 14 pixels.
Outro exemplo com media query para ajustar o layout de uma tabela em telas menores:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 600px) {
th, td {
display: block;
width: 100%;
}
}
</style>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>25</td>
<td>joao@example.com</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
<td>maria@example.com</td>
</tr>
<!-- Mais linhas da tabela... -->
</tbody>
</table>
Neste exemplo, quando a largura da tela for igual ou menor que 600 pixels, a media query será ativada, e as células (th e td) da tabela serão exibidas em blocos, ocupando toda a largura disponível.
As media queries são essenciais para criar layouts responsivos que se adaptam às diferentes telas dos dispositivos.
Com elas, podemos ajustar o tamanho, o posicionamento e outros estilos dos elementos da página para proporcionar uma experiência consistente e agradável aos usuários em qualquer contexto de visualização.
