Berapa ukuran viewport yang paling sering digunakan dalam desain responsif?

Saya melihat saran berbeda dari sangat rinci (seperti di sini ) ke lebih singkat, seperti google (di sini ). jadi saya bertanya-tanya ukuran apa yang paling cocok untuk digunakan layar @ media.

Ini mungkin bukan "stat", tetapi lihat Bootstrap Twitter yang mulai banyak digunakan.

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

Pendeknya:

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

Saya kira ini tergantung pada desain, yang mungkin berbeda setiap bangunan. Itu juga tergantung apakah Anda menggunakan cairan 100% atau mengganti breakpoints.

Saya cenderung menggunakan beberapa hal berikut, umumnya ukuran besar tidak banyak berubah di antara breakpoints:

@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

Tidak ada gunanya mencoba untuk menutupi semua resolusi dll android yang berbeda ... ada begitu banyak.

Kadang-kadang breakpoints tidak memicu ukuran sebenarnya karena scrollbar, yang masing-masing browser memiliki aturan berbeda. Mungkin bijaksana untuk memotong 20px per @ media untuk memastikan mereka memicu. Saya kadang-kadang menukar min-width: 320px dengan max-width: 480px, karena di bawah 320 tidak ada yang ditampilkan.