Consultas de imprensa: Como atingir o desktop, tablet e celular?

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?

Quantastical
Pergunta editada :em
Programação
css3 css mobile tablet media-queries
16º junho 2011 в 10:57
17 vistas
Solução

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.

ryanve
Resposta editada :em
Comentários (16)

Se você quiser ter como alvo um dispositivo, basta escrever "largura mínima do dispositivo". Por exemplo:

Para iPhone

@media only screen and (min-device-width: 480px){}

Para comprimidos

@media only screen and (min-device-width: 768px){}

Aqui estão alguns bons artigos:

Fizzix
Resposta editada :em
Comentários (10)

  1. 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.

  2. 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.

loxsat
Resposta editada :em
Comentários (0)