Quali sono le dimensioni del riquadro di visualizzazione più frequenti da utilizzare nella progettazione reattiva?

8

Vedo suggerimenti diversi da molto dettagliati (come qui ) a più brevi, come Google ( qui ). quindi mi chiedo quali sono le dimensioni più adatte da utilizzare con lo schermo @media.

responsive-webdesign media-queries

— alfish
fonte

7

Questa potrebbe non essere una "stat", ma dai un'occhiata a Twitter Bootstrap che sta iniziando a essere usato molto.

https://github.com/twitter/bootstrap/blob/master/less/responsive.less

In breve:

<= 767px
768px - 979px
980px - 1199px
> = 1200px

— sebastien
fonte

7

Immagino che questo dipenda dal design, che potrebbe differire da ogni build. Dipende anche se si utilizza un fluido al 100% o si cambia sui punti di interruzione.

Tendo a utilizzare alcuni dei seguenti, in genere le grandi dimensioni non cambiano molto tra i punti di interruzione:

@media screen and (min-width:320px){} // mobile portrait
@media screen and (min-width:480px){} // mobile landscape
@media screen and (min-width:768px){} // ipad portrait
@media screen and (min-width:1024px){} // browser, ipad landscape
@media screen and (min-width:1200px){} // browser
@media screen and (min-width:1600px){} // browser

Inutile tentare di coprire tutte le diverse risoluzioni Android ecc ... ce ne sono così tante.

Inoltre, a volte i punti di interruzione non si attivano sulla dimensione effettiva a causa della barra di scorrimento, per cui ogni browser ha regole diverse per. Potrebbe essere saggio tagliare 20 px per @media per assicurarsi che si inneschino. A volte cambio la larghezza minima: 320 px per una larghezza massima: 480 px, poiché sotto 320 non potrebbe essere visualizzato nulla.

— DBUK
fonte