As novas consultas de mídia para meu site são baseadas em dois princípios orientadores:
- O layout do conteúdo precisa se adaptar a qualquer largura do dispositivo, para que o conteúdo seja mais fácil de ler.
- Em telas sensíveis ao toque e dispositivos móveis: os itens do menu de navegação precisam ser grandes o suficiente para que os usuários possam interagir facilmente com eles.
O layout da área de trabalho inclui um menu de navegação de largura total.
Esse layout funciona até 1005px, ponto em que alguns dos itens do menu de navegação começam a ficar um abaixo do outro, como mostrado abaixo: ll definir o ponto de interrupção lá.
/* Breakpoint #1 para telas de tamanho médio */ @media screen and (max-width: 1005px) { }
Observe que em meus comentários de folha de estilo e também em meus dois princípios orientadores, removi quaisquer referências a qualquer dispositivo móvel específico. Trabalhando para baixo em largura, o layout quebra novamente em 745px , como você pode ver nesta captura de tela. Então eu defino outro ponto de interrupção de consulta de mídia em 745px:
/* Breakpoint #2 para telas pequenas */ @media screen and (max-width: 745px) { }
O layout agora funciona em 745px de largura. O site agora tem um conjunto de pontos de interrupção que são completamente independentes de dispositivo e garantem que o design se adapte da melhor maneira possível a qualquer dispositivo. A técnica específica para consultas de mídia baseadas em design que mostrei agora precisa de refinamento, especialmente para sites que atualizam continuamente seu menu de navegação e conteúdo.
A ideia importante é esta: devemos escolher consultas de mídia com base no design, não com base em dispositivos específicos.
Rumo a uma Web Universal
A ideia de consultas de mídia baseadas em design é muito simples. E adotar o conceito em um projeto de web design pode ser tão rudimentar quanto redimensionar a janela do seu navegador até o ponto em que o layout quebra, e então configurar as media queries nesse ponto, como no meu caso.
As consultas de mídia “padrão” que estamos usando atualmente ignoram convenientemente a crescente variedade de dispositivos que não estão de acordo com as dimensões que a Apple, Samsung, Sony e outros fornecedores de dispositivos escolheram para nós. As consultas de mídia com base em dispositivos específicos não nos permitem criar sites à prova de futuro e independentes de dispositivo. Se quisermos continuar a defender a essência do que há de melhor na Web, continuar a criar uma Web que seja universal, uma Web que não seja conduzida e liderada por um determinado dispositivo móvel, navegador da Web ou empresa, então uma das coisas que podemos fazer é nos afastar das consultas de mídia específicas do dispositivo.
