Eu tenho feito algumas pesquisas sobre questões de mídia e ainda não entendo bem como direcionar dispositivos de certos tamanhos.
Eu quero ser capaz de ter como alvo o desktop, tablet e celular. Sei que haverá algumas discrepâncias, mas seria bom ter um sistema genérico que pudesse ser usado para atingir esses dispositivos.
Alguns exemplos que eu encontrei:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Ou..:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
O que você acha que estes 'breakpoints' deveriam ser para cada dispositivo?
IMO, estes são os melhores pontos de parada:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
**Editar***: Refinado para trabalhar melhor com 960 grelhas:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Na prática, muitos designers convertem pixels em ems, em grande parte b/c ems é melhor pagar zooming. No zoom padrão 1em ==== 16px
. Multiplique os pixels por 1em/16px
para obter ems. Por exemplo, 320px ==== 20em
.
Em resposta ao comentário, "largura mínima" é o padrão em "mobile-first" design, no qual você começa desenhando para seus menores ecrãs, e depois adiciona cada vez mais consultas de mídia, trabalhando você em ecrãs cada vez maiores. Independentemente de você preferir min-
, max-
, ou combinações delas, esteja ciente da ordem das suas regras, tendo em mente que se várias regras combinarem com o mesmo elemento, as regras posteriores irão sobrepor-se às regras anteriores.
Se você quiser ter como alvo um dispositivo, basta escrever "largura mínima do dispositivo". Por exemplo:
@media only screen and (min-device-width: 480px){}
@media only screen and (min-device-width: 768px){}
Aqui estão alguns bons artigos:
Eu usei este site para encontrar a resolução e desenvolvi CSS por números reais. Meus números variam um pouco das respostas acima, exceto que o meu CSS realmente atinge os dispositivos desejados.
Além disso, tenha esta peça de código de depuração logo após a sua consulta de mídia por exemplo
@media apenas tela e (largura mínima: 769px) e (largura máxima: 1281px) {
/* para ecrãs de 10 polegadas */
corpo::antes de {
conteúdo: " tablet para alguma consulta de mídia de desktop (769 > 1281) disparado";
font-weight: negrito;
display: bloco;
text-align: centro;
fundo: rgba(255, 255, 0, 0.9); /* amarelo semi-transparente */
posição: absoluta;
superior: 0;
esquerda: 0;
direita: 0;
índice z: 99;
}
}
Adicione este item de depuração em cada consulta de mídia e você verá qual consulta está sendo aplicada.