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.
8
Ini mungkin bukan "stat", tetapi lihat Bootstrap Twitter yang mulai banyak digunakan.
https://github.com/twitter/bootstrap/blob/master/less/responsive.less
Pendeknya:
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.