Um resumo de todas as maneiras como os recursos de mídia permitem que você responda a dispositivos e preferências.
O design responsivo não seria possível sem as consultas de mídia. Antes das consultas de mídia, não havia como saber que tipo de dispositivo as pessoas estavam usando para visitar seu site. Os designers tiveram que fazer suposições. Essas suposições foram codificadas em designs de largura fixa ou layouts fluidos.
Tudo mudou com a introdução das consultas de mídia. Pela primeira vez, os designers podiam atender às necessidades das pessoas. Os designers poderiam ajustar os layouts para responder aos dispositivos das pessoas.
Lembre-se de que uma consulta de mídia inclui um tipo de mídia opcional e um recurso de mídia obrigatório. Não houve muitas mudanças nos tipos de mídia ao longo dos anos. Ainda há apenas quatro valores possíveis:
@media all
@media screen
@media print
@media speech
Já os recursos de mídia se expandiram muito. Agora os designers podem atender aos usuários além da metade, adaptando os designs para se ajustar a muito mais do que apenas o tamanho da tela.
Dimensões da janela de visualização
As consultas de mídia mais populares na Web são as que lidam com a largura da janela de visualização. Mas, mesmo assim, você tem uma escolha. Você pode usar o recurso de mídia max-width
para aplicar estilos abaixo de uma determinada largura ou o recurso de mídia min-width
para aplicar estilos acima de uma determinada largura.
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
main {
display: block;
}
}
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Pessoalmente, eu gosto de usar min-width
. Aplico estilos de layout de forma aditiva. Eu apresento novas regras de layout em cada ponto de interrupção em vez de desfazer regras anteriores.
Essa abordagem aditiva também funciona para altura. Com min-height
, é possível introduzir mais regras à medida que mais altura de viewport fica disponível. Por exemplo, você pode ter um elemento de cabeçalho que quer ancorar na parte de cima da janela do navegador se houver espaço vertical suficiente.
@media (min-height: 30em) {
header {
position: fixed;
}
}
Mas você pode usar o recurso de mídia max-height
, se preferir. Aqui, o cabeçalho é ancorado por padrão, mas a aderência é removida se não houver espaço vertical suficiente.
header {
position: fixed;
}
@media (max-height: 30em) {
header {
position: static;
}
}
A escolha entre os prefixos min-
e max-
não se aplica apenas a width
e height
. O recurso de mídia aspect-ratio
oferece a mesma opção. Ele também oferece uma versão sem prefixo se você quiser aplicar estilos em uma proporção exata de largura para altura.
@media (min-aspect-ratio: 16/9) {
// The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
// The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
// The ratio of width to height is exactly 16 by 9.
}
Fornecer estilos diferentes para diferentes proporções pode sair do controle rapidamente. Se você não precisar desse nível de controle, o recurso de mídia orientation
pode ser mais adequado às suas necessidades. Ele tem dois valores possíveis: portrait
ou landscape
.
@media (orientation: portrait) {
// The width is less than the height.
}
@media (orientation: landscape) {
// The width is greater than the height.
}
Embora os termos "retrato" e "paisagem" sejam mais usados para se referir à orientação de dispositivos móveis, o recurso de mídia orientation
não é específico do dispositivo. Uma janela de navegador em tela cheia em um laptop típico terá um valor de orientation
de landscape
.
Telas
Telas diferentes têm densidades de pixels diferentes, medidas em dpi
, pontos por polegada. É possível ajustar os estilos para diferentes densidades de pixel usando o recurso de mídia resolution
. Assim como aspect-ratio
, resolution
tem três variedades: mínimo, máximo e exato.
@media (min-resolution: 300dpi) {
// The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
// The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
// The display has a pixel density of exactly 300 dots per inch.
}
Talvez você nunca precise usar consultas de mídia resolution
. A densidade de pixels geralmente é um problema apenas para imagens, e as imagens responsivas são uma maneira de lidar com a densidade de pixels diretamente no HTML.
Por outro lado, o CSS é onde você define animações e transições. É possível ajustar essas animações e transições para responder a diferentes taxas de atualização usando o recurso de mídia update
. Esse recurso de mídia informa um dos três valores: none
, slow
e fast
.
Um valor de update
de none
significa que não há taxa de atualização. Por exemplo, não é possível atualizar uma página impressa.
Um valor de update
de slow
significa que a tela não pode ser atualizada rapidamente. Uma tela e-ink é um exemplo de tela com taxa de atualização lenta.
Um valor de update
de fast
significa que a tela é atualizada rápido o suficiente para processar animações e transições.
@media (update: fast) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Nem todos os aspectos da tela estão relacionados aos recursos de hardware. No módulo sobre temas, você aprendeu a definir propriedades em um arquivo manifesto de app da Web. Uma dessas propriedades é chamada de display
, e você pode atribuir a ela um valor de fullscreen
, standalone
, minimum-ui
ou browser
. O recurso de mídia display-mode
correspondente permite personalizar seus estilos para essas diferentes opções.
Digamos que você tenha fornecido um valor display
de standalone
no manifesto do app da Web. Se alguém adicionar seu site à tela inicial, ele será iniciado sem nenhuma interface do navegador. Você pode mostrar um botão "Voltar" para esses usuários.
button.back {
display: none;
}
@media (display-mode: standalone) {
button.back {
display: inline;
}
}
Cor
Há vários recursos de mídia para consultar os recursos de cores de um dispositivo. Se você quiser ajustar seus estilos para qualquer tela que só exiba tons de cinza, use o recurso de mídia monochrome
sem nenhum valor.
@media (monochrome) {
body {
color: black;
background-color: white;
}
}
Há um recurso de mídia color
correspondente.
@media (color) {
body {
color: maroon;
background-color: linen;
}
}
Para telas coloridas, é possível escrever consultas com os recursos de mídia color-gamut
, color-index
ou dynamic-range
. Todos eles informam detalhes específicos sobre os recursos de cores da tela.
Neste exemplo, os valores de cor são atualizados em resposta ao recurso de mídia dynamic-range
, que informa a combinação de brilho máximo, profundidade de cor e taxa de contraste da tela. Os valores possíveis são standard
ou high
. Uma tela de alta definição que informa um valor de dynamic-range
de high
recebe um espaço de cor diferente usando a nova função color()
do CSS.
.neon-red {
color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
.neon-red {
color: color(display-p3 1 0 0);
}
}
Interação
Os recursos de mídia também podem informar o tipo de mecanismo de entrada usado para interagir com seu site: hover
, any-hover
, pointer
e any-pointer
. Consulte o módulo sobre interação para mais detalhes.
Preferências
Há uma variedade de consultas de mídia que permitem responder às preferências do usuário: prefers-color-scheme
, prefers-contrast
e prefers-reduced-motion
. Consulte os módulos sobre temas e acessibilidade para mais detalhes.
É possível combinar recursos de mídia em uma consulta de mídia. Você pode definir o escopo dos estilos de animação para que eles sejam aplicados apenas se o dispositivo tiver uma taxa de atualização rápida e o usuário não tiver expressado uma preferência por movimento reduzido.
@media (update: fast) and (prefers-reduced-motion: no-preference) {
a {
transition-duration: 0.4s;
transition-property: transform;
}
a:hover {
transform: scale(150%);
}
}
Mais recursos de mídia
Mais recursos de mídia estão a caminho.
Os recursos de mídia forced-colors
e inverted-colors
informam se um dispositivo está usando uma paleta de cores restrita ou invertida.
Um recurso de mídia scripting
permite ajustar o CSS com base na disponibilidade do JavaScript.
Um recurso de mídia chamado prefers-reduced-data
permite que os usuários especifiquem que estão em uma conexão com franquia para que você possa enviar recursos menores ou menos deles.
Outras propostas ainda estão sendo formuladas. No próximo e último módulo, você vai aprender sobre uma proposta de um recurso de mídia que processa diferentes configurações de tela.
Teste seu conhecimento
Teste seus conhecimentos sobre recursos de mídia
Uma consulta de mídia pode verificar um dispositivo com uma largura específica, como @media (width: 1024px)
?
1023px
e abaixo de 1025px
.min-width
e max-width
estão disponíveis.Uma consulta de mídia pode verificar um dispositivo em um aspect-ratio
específico, como @media (aspect-ratio: 4/3)
?
aspect-ratio
.Quais são as consultas de mídia de cor válidas?
@media (color)
@media (monochrome)
@media (color-gamut: srgb)
@media (min-color-index: 15000)
@media (dynamic-range: high)
Quais das seguintes consultas de mídia de preferência do usuário são válidas?
@media (prefers-color-scheme: dark)
@media (prefers-colors: high-definition)
@media (prefers-reduced-motion: reduce)
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)