Como fazer - Pontos de interrupção típicos do dispositivo
Saiba como usar consultas de mídia para pontos de interrupção de dispositivos comuns.
Pontos de interrupção típicos do dispositivo
Existem toneladas de telas e dispositivos com diferentes alturas e larguras, por isso é difícil criar um ponto de interrupção exato para cada dispositivo. Para manter as coisas simples, você pode segmentar cinco grupos comuns:
Exemplo
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Páginas relacionadas
Tutorial CSS: consultas de mídia CSS
Tutorial CSS: Exemplos de consultas de mídia CSS
Referência CSS: A regra @media
Tutorial RWD: Web design responsivo com consultas de mídia
Tutorial JavaScript: O método window.matchMedia()