Capítulo 13 – Use sempre media queries baseadas no conteúdo da sua página – Valores para Media Queries
Capítulo 13 – Use sempre media queries baseadas no conteúdo da sua página – Valores para Media Queries
0 0
capitulo13
On Github littlemario / capitulo13
Capítulo 13
Use sempre media queries baseadas no conteúdo da sua página
Media Queries
Media Query consiste em um tipo de mídia de zero ou mais expressões que verificam as condições de determinados recursos de mídia.
Texto por W3C
Valores para Media Queries
Os valores que você escolhe para suas media queries são importantíssimos, pois são os pontos onde o seu layout vai se ajustar a outra resolução, a esses pontos damos o nome de breakpoints.
Quais são os valores padrões de se colocar nas media queries?
PÉSSIMA PRÁTICA
Essa prática é mais conhecida como devide-driven breakpoint, pois os valores são gerados de acordo com o tamanho de dispositivos padrões.
- 480px: Smartphones em geral.
- 600px: Tablets em geral(Modo Retrato).
- 768px: Tablets em geral(Modo Paisagem).
- 992px e maiores: Para desktops e tablets tela retina
Não use devide-driven breakpoints
Uma lista que pensa em tamanhos de dispositivos padrão é pobre, pois não pensa em todas as possibilidades de dispositivos.
E agora?
- E os 360px de um Galaxy S4?
- E o iPhone 5 com seus 568px em landscape?
Com isso concluimos que...
Usar valores padronizados de Media Queries não fará com que seu design funcione em todos os dispositivos, mas somente nos dispositivos padrões.
A solução
Use content-driven breakpoints
Content-driven breakpoints são media queries que ajustam seu layout a partir do seu conteúdo e do seu design.
Exemplos de breakpoints baseados no conteúdo/design
Como achar esses breakpoints?
Abra sua página original(seja mobile-first ou desktop-first) Vá alterando a largura da janela até sentir que seu design esta ruim. Quando encontrar um ponto em que o design estiver ruim, copie o tamanho da janela e crie uma media query com esse valor no seu CSS. Recarregue todo o conteúdo da página novamente e verifique se o layout melhorou, se sim, continue alterando o tamanho da tela até encontrar o próximo breakpoint.Ferramentas que podem te auxiliar a encontrar os breakpoints
É muito comum ver sites com no máximo 5 ou 6 media queries, o que não é muito aconselhável, pois fazemos as media queries voltadas apenas para quando o layout quebra. Montar um layout para sua pagina com apenas uma coluna só, talvez uma outra versão com 2 ou até 3 colunas, mas muitas vezes precisamos fazer apenas algumas pequenas mudanças.
Tweakpoints
Não há nada de errado em desenvolver media queries simples com apenas alguns comandos apenas para ajustes mais simples na páginas, e a esses pequenos ajustes damos o nome de tweakpoints.
Um bom exemplo de uso de tweakpoints é o site da Caelum(Cursos online na área de Tecnologia) que em seu CSS possui mais de 33 media queries com valores diferentes, alguns pequenos ajustes, e outros com apenas uma linha de estilização dentro, tweakpoints.