Berapa ukuran viewport yang paling sering digunakan dalam desain responsif?


8

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.

Jawaban:



7

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.