Media queries são uma forma de adaptar o estilo de uma página web de acordo com as características do dispositivo que está sendo usado para visualizá-la, como tamanho de tela, orientação, densidade de pixel e outros recursos.
Aqui está um exemplo básico de como usar media queries em CSS:
/* Estilos para telas grandes */
h1 {
font-size: 2em;
}
/* Estilos para telas pequenas */
@media only screen and (max-width: 768px) {
h1 {
font-size: 1.5em;
}
}
Neste exemplo, o h1 é estilizado com um tamanho de fonte maior em telas grandes, mas quando a largura da tela é menor que 768 pixels, a media query é acionada e o tamanho da fonte é reduzido.
Aqui está a sintaxe básica de uma media query:
@media only screen and (condição) {
/* Estilos para a condição especificada */
}
A condição é definida com uma ou mais expressões que incluem propriedades de dispositivo, como largura, altura, orientação, densidade de pixel, resolução e outros. Algumas das condições mais comuns são:
max-widthemin-width: limites de largura da tela.max-heightemin-height: limites de altura da tela.orientation: orientação da tela (retrato ou paisagem).resolution: resolução de tela.
Os tamanhos padrões para media queries podem variar de acordo com as necessidades do projeto, mas aqui estão alguns pontos de referência comuns:
- Telas pequenas: geralmente, telas com menos de 768 pixels de largura são consideradas pequenas. Isso inclui smartphones em modo retrato e alguns tablets em modo paisagem.
- Telas médias: geralmente, telas com largura entre 768 e 992 pixels são consideradas médias. Isso inclui tablets em modo paisagem e algumas telas de desktop com resoluções mais baixas.
- Telas grandes: geralmente, telas com largura acima de 992 pixels são consideradas grandes. Isso inclui telas de desktop com resoluções médias e altas, bem como laptops com telas maiores.
Aqui estão exemplos de como você pode escrever media queries em CSS para telas pequenas, médias e grandes, com base nos tamanhos de tela mencionados:
/* TELAS PEQUENAS */
@media only screen and (max-width: 767px) {
/* Adicione seu código CSS aqui para telas pequenas */
}
/* TELAS MÉDIAS */
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* Adicione seu código CSS aqui para telas médias */
}
/* TELAS GRANDES */
@media only screen and (min-width: 992px) {
/* Adicione seu código CSS aqui para telas grandes */
}
Esses exemplos usam media queries baseadas em largura de tela (width), que é a abordagem mais comum para definir pontos de quebra em um design responsivo. Você pode adicionar essas media queries em seu CSS para adaptar seu layout a diferentes tamanhos de tela.
Esses tamanhos são apenas uma referência e podem variar de acordo com o projeto e o público-alvo. É importante testar a página em diferentes dispositivos e ajustar as media queries conforme necessário para garantir que o conteúdo seja exibido de maneira eficaz em uma variedade de tamanhos de tela.
Algumas empresas e organizações mantêm guias de estilo que incluem tamanhos recomendados para media queries em seus projetos, portanto, se você estiver trabalhando em um projeto com diretrizes de design, é uma boa ideia verificar se há recomendações específicas para media queries.
A media query pode incluir várias condições separadas por vírgulas para criar regras mais complexas.
Lembre-se de que as media queries são suportadas por navegadores modernos e podem não funcionar em navegadores mais antigos. É uma boa prática testar suas páginas em uma variedade de dispositivos e navegadores para garantir que elas sejam exibidas corretamente em diferentes configurações.