Como criar: pontos de ruptura de dispositivos típicos

Aprenda a usar consultas de mídia para pontos de ruptura de dispositivos comuns.

Ponto de ruptura de dispositivo típico

Existem muitos dispositivos e telas com diferentes alturas e larguras, tornando difícil criar pontos de ruptura precisos para cada dispositivo.

Para simplificar a operação, você pode identificar cinco categorias comuns:

Exemplo

/* Equipamentos ultra-pequenos (smartphones, 600px ou menos) */
@media only screen and (max-width: 600px) {...}
/* Equipamentos pequenos (tablets verticais e smartphones grandes, 600px ou mais) */
@media only screen and (min-width: 600px) {...}
/* Equipamentos medianos (tablets horizontais, 768px ou mais) */
@media only screen and (min-width: 768px) {...}
/* Equipamentos grandes (notebooks e computadores de mesa, 992px ou mais) */
@media only screen and (min-width: 992px) {...}
/* Equipamentos ultra-grandes (notebooks e computadores de mesa, 1200px ou mais) */
@media only screen and (min-width: 1200px) {...}

Experimente você mesmo

Páginas relacionadas

Tutorial:Consulta de mídia CSS

Tutorial:Exemplo de consulta de mídia CSS

Manual de referência:Regra @media CSS

Tutorial:Implementação de design responsivo Web através de consultas de mídia

Manual de referência:Método JavaScript window.matchMedia()