it-swarm-pt.tech

Pontos de interrupção comuns para consultas de mídia em um site responsivo

Portanto, estou trabalhando no meu primeiro site responsivo, que faz uso extensivo de consultas de mídia. Eu queria saber se existem algumas larguras de página comuns que eu deveria otimizar.

Provavelmente terei uma largura máxima (não fluindo totalmente). Acho que terei talvez 3-5 larguras definidas com pequenas transições CSS3 divertidas entre elas (semelhante a como CSS Tricks funciona).

Atualmente, os números que estou usando são um tanto arbitrários:

@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}

Além disso, acho que li que alguns dispositivos móveis não se comportam conforme o esperado (com @media). Onde isso entra em jogo e como devo lidar com essas situações?

42
Zach Lysobey

Ao decidir pontos de interrupção para suas consultas de mídia, considere estas realidades:

  • Existem centenas de tamanhos de tela diferentes em milhares de dispositivos diferentes.
  • O futuro trará novos tamanhos de tela.
  • Apple, Samsung, Microsoft, LG, Nokia e qualquer outro fabricante de dispositivo podem, a qualquer momento, alterar o tamanho da tela de seus modelos populares.

Com tantas possibilidades de viewport, combinar pontos de interrupção com dispositivos específicos não parece uma estratégia eficiente. Acompanhar o que é popular, o que há de novo e o que mudou será uma tarefa sem fim.

Uma abordagem melhor pode ser definir pontos de interrupção com base no conteúdo e no layout.

Com essa abordagem, seu site usa seus pontos de interrupção naturais para se adaptar aos tamanhos de viewport todos, em vez de pontos de interrupção artificiais direcionados aos tamanhos de tela comuns atualmente.

Esse método é tão simples e fácil que pode ser difícil de acreditar:

  1. Execute seu site em um desktop ou laptop.
  2. Conforme você estreita a janela do navegador, observe como o site responde.
  3. Quando você atinge o ponto em que seu layout não é mais perfeito, esse é seu primeiro ponto de interrupção.
  4. Ajuste seu site para o tamanho da tela (que pode não ter relação com nenhum dispositivo).
  5. Continue estreitando a janela do navegador.
  6. Quando você atinge o próximo problema de layout, esse é o seu segundo ponto de interrupção.
  7. ... e assim por diante.

Obviamente, se você estiver projetando para dispositivos móveis primeiro, o processo será inverso: comece com uma tela estreita e trabalhe para sair.

Com pontos de interrupção naturais, você não precisa mais se concentrar em um universo gigante de tamanhos de viewport, porque seu site se adaptará a qualquer dispositivo, agora e no futuro.


De acordo com m desenvolvedor , essa abordagem coloca os pontos de interrupção em um círculo completo à sua intenção original:

Não sei ao certo como criamos a frase "pontos de interrupção específicos do dispositivo" ... Como eu o entendi, o termo "ponto de interrupção" sempre foi uma referência a onde o conteúdo ou o layout seria "interrompido" ( ou seja, parece falho) e, portanto, você precisa aplicar uma consulta de mídia nesse ponto. Mas acho que isso é apenas semântica, sempre achei que era senso comum se referir a pontos de interrupção no contexto de conteúdo ou layout.

~ Louis Lazaris, ImpressiveWebs

fonte: https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-168596745


Mais informações (sites externos):

25
Michael_B

Além disso, eu recomendaria definitivamente o uso de device-width para seus tamanhos de celular, a menos que você queira que os usuários vejam seus estilos de celular quando redimensionarem a janela do navegador em um dispositivo não móvel. width é a largura da janela de exibição e device-width é a resolução atual do dispositivo.

Além disso, acho que li que alguns dispositivos móveis não se comportam conforme o esperado (com @media).

Você está certo. Muitos dispositivos não oferecem width ou device-width que você espera, especialmente ao alternar entre paisagem e retrato (eles geralmente fornecem a largura da paisagem quando em retrato). O zoom automático do dispositivo também pode fazer com que uma chave de bocas seja danificada O uso da meta tag da viewport pode ajudar com muitos desses problemas. (Mais informações sobre isso aqui)

43
Drew Gaynor

É isso que eu uso ...

@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}

Existem todos os tipos de outros lá, conforme apropriado (largura mínima sem largura máxima ou largura máxima sem largura mínima), mas essa é a minha configuração básica.

Pessoalmente, nunca entendi as larguras ímpares que muitas pessoas usam. Por exemplo, 20 e acima possui cinco incrementos de Consulta de mídia CSS3: 480, 600, 768, 992 e 1382px.

Isso não faz nenhum sentido para mim. As quebras lógicas estão em intervalos de 320px (320, 640, 960, 1280, 1600, 1920). Observe que essas quebras podem fornecer um layout ligeiramente diferente para praticamente qualquer dispositivo em qualquer orientação (omnia é 240x400, iphone é 320x480, droid x é 480x858, ipad é 768x1024, galaxy s3 é 720x1280 e estão falando de tablets de 1920x1080).

JJ

21
doubleJ

algumas resoluções para procurar:

tela do iphone (muitos outros smartphones têm tamanhos de tela semelhantes: resolução de 960 por 640 pixels a 326 ppi http://www.Apple.com/iphone/specs.html

tela do ipad (muitos outros tablets têm tamanhos de tela semelhantes, resolução de 1024 por 768 pixels a 132 pixels por polegada (ppi) http://www.Apple.com/ipad/specs/

Tela 'normal' Muitas telas normais também têm uma resolução de 1024 por 768 pixels, de acordo com: http://www.w3schools.com/browsers/browsers_display.asp mas estou não atestando sua confiabilidade.

Estou procurando mais dados agora.

1
bigblind