Exemplos de consultas de mídia CSS - Instância
- Página anterior Consulta de mídia CSS
- Próxima página Introdução ao RWD
Exemplos de consultas de mídia CSS - Mais
Vamos ver mais exemplos do uso de consultas de mídia.
As consultas de mídia são uma técnica popular para passar folhas de estilo personalizadas para diferentes dispositivos.
A seguir, demonstramos um exemplo simples para alterar a cor de fundo de diferentes dispositivos:
Exemplo
/* Configure a cor de fundo do body para marrom claro */
body {
background-color: tan;
}
/* No monitor com 992 pixels ou menor, configure a cor de fundo para azul */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* No monitor com 600 pixels ou menor, configure a cor de fundo para a olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Você quer saber por que usamos exatamente 992px e 600px? Eles são o que chamamos de 'pontos de quebra típicos' (typical breakpoints) dos dispositivos. Você pode encontrar mais sobre isso em Tutorial de design web responsivo Aprenda mais sobre os pontos de quebra típicos no design.
Menu media queries
In this example, we use media queries to create a responsive navigation menu that varies in different screen sizes.
Exemplo
/* Navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar link */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* On screens with a width of 600 pixels or less, stack the menu links instead of displaying them side by side */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Column media queries
A common use of media queries is to create a flexible layout. In this example, we created a layout that changes between four columns, two columns, and full-width columns depending on different screen sizes:
Large screens:
Medium screens:
Small screens:
Exemplo
/* Create four equal columns that are adjacent floats */
.column {
float: left;
width: 25%;
}
/* On screens with a width of 992px or less, change from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens with a width of 600 pixels or less, stack the columns instead of displaying them side by side */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Dica:a more modern method to create column layouts is to use CSS Flexbox (see the examples below). However, Internet Explorer 10 and earlier versions do not support it. If support for IE6-10 is needed, use floats (as shown above).
To learn more about the flexbox layout module, please study Flexbox CSS this chapter.
To learn more about responsive web design, please study our Tutorial de design web responsivo.
Exemplo
/* Container for the flexbox */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens with a width of 992 pixels or less, change from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens with a width of 600 pixels or less, stack the columns instead of displaying them side by side */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Hiding elements with media queries
Another common use of media queries is to hide elements on different screen sizes:
No pequeno ecrã, ocultarei.
Exemplo
/* Se o tamanho da tela for 600 pixels ou menor, oculte o elemento */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Mudar o tamanho da fonte com consultas de mídia
Você também pode usar consultas de mídia para alterar o tamanho da fonte de elementos em diferentes tamanhos de tela:
Tamanho de fonte variável.
Exemplo
/* Se o tamanho da tela for maior que 600 pixels, defina o tamanho da fonte do <div> como 80 pixels */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Se o tamanho da tela for 600px ou menor, defina o tamanho da fonte do <div> como 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Biblioteca de imagens flexível
Neste exemplo, usaremos consultas de mídia com flexbox para criar uma biblioteca de imagens responsiva:
Exemplo
Site flexível
Neste exemplo, usaremos consultas de mídia com flexbox para criar um site responsivo, com navegação flexível e conteúdo flexível.
Exemplo
Orientação: Retrato / Paisagem
As consultas de mídia também podem ser usadas para alterar o layout da página com base na orientação do navegador.
Você pode definir um conjunto de propriedades CSS que se aplicam apenas quando a largura da janela do navegador for maior do que sua altura, ou seja, na tela em paisagem:
Exemplo
Se a orientação estiver em modo paisagem, use o fundo de cor azul claro:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Largura mínima a máxima
Você também pode usar as propriedades max-width e min-width para definir o largura mínima e máxima.
Por exemplo, quando a largura do navegador estiver entre 600 e 900 pixels, altere o estilo do elemento <div>:
Exemplo
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Uso de valor adicional: No exemplo a seguir, usamos a vírgula (semelhante ao operador OR) para adicionar consultas de mídia adicionais às consultas de mídia existentes:
Exemplo
/* Quando a largura estiver entre 600 e 900 pixels ou maior que 1100 pixels, altere o estilo do <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Manual de referência @media CSS
Para uma visão completa de todos os tipos de mídia e características/expressões, consulte Regra @media na referência CSS.
Dica:Para aprender mais sobre design web responsivo (como se adaptar a diferentes dispositivos e telas) e usar os pontos de interrupção das consultas de mídia, leia nosso Tutorial de design web responsivo.
- Página anterior Consulta de mídia CSS
- Próxima página Introdução ao RWD
