Pertama, terima kasih atas jawaban dan pedoman yang berharga, itu pasti membantu!
Izinkan saya menambahkan kesimpulan saya:
Secara praktis, menargetkan resolusi layar ponsel bukan UX yang baik, resolusi terlalu tinggi untuk layar kecil, font akan terlalu kecil untuk dibaca, ikon akan terlalu kecil untuk diklik, dll.
Jadi, lebih baik untuk membuat desain berdasarkan ukuran viewport yang sebenarnya! Cara ini didasarkan pada apa yang dapat dilihat dan dirasakan pengguna.
Untuk mencapai itu di kehidupan nyata, kita harus menambahkan meta tag lebar viewport di dalam <head>
dokumen HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ini memberi tahu browser untuk merender halaman dengan lebar sama dengan lebar layar sehingga memastikan bahwa lebar halaman HTML sama dengan lebar layar dalam hal piksel. Pengembangan kemudian dapat dengan mudah direncanakan dengan kueri media yang menargetkan ukuran viewport seluler yang berbeda (yang agak dekat satu sama lain), dan akan menghasilkan elemen yang lebih jelas secara visual.
Tolong koreksi saya jika saya salah.
Memperbarui:
Berdasarkan pengalaman saya yang sederhana, saya menyarankan langkah-langkah di bawah ini untuk pengembangan situs web yang lebih responsif:
1 - menggunakan meta view-port (lihat atas), itu juga akan meningkatkan peringkat halaman web dalam hasil pencarian mobile menurut google.
http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
Setelah pengujian, tampaknya menambahkan meta port tampilan saja akan memberikan nilai situs web Anda pada alat pengujian seluler
https://developers.google.com/speed/pagespeed/insights/
2 - Anda mungkin ingin mempertimbangkan untuk menerapkan pendekatan mobile-first, selalu lebih mudah untuk menjadi lebih besar dari yang lebih kecil (tergantung pada seberapa kompleks situs web Anda)
3- Terapkan sistem responsif hibrid, perpaduan antara adaptif (fluida) dan responsif (css media-queries), untuk mencapai hal ini:
Gunakan persentase untuk lebar / margin horisontal / paddings. (margin vertikal dapat memiliki ukuran piksel tetap jika Anda suka .. bergulir tidak menjadi masalah lagi)
Gunakan em untuk font, dengan cara ini ketika Anda mengubah ukuran font untuk body (atau html) di media-query semua elemen CSS akan beradaptasi dengan ukuran itu, menggunakan px akan membuatnya menjadi mimpi buruk karena Anda harus pergi untuk setiap kelas CSS dan ubah ukuran font-nya.
Float div di sebelah kiri sehingga sejajar dengan ruang yang tersedia (atau kanan jika desain Anda mengharuskannya).
4- Tentukan titik istirahat , gunakan alat pengujian responsif untuk itu. Saya menggunakan tampilan desain responsif firefox, cukup mempersempit lebarnya hingga Anda mencapai titik di mana situs web menjadi rusak (misalnya 500px), yang merupakan titik istirahat tandai.
Terapkan aturan CSS baru di dalam kueri media untuk titik istirahat itu (500px),
5- ingat untuk menjaga kualitas dan kejelasan situs web! Jika elemen menjadi tidak jelas dan terlalu dekat satu sama lain, maka perluas lebar elemen untuk menempati lebar kontainer dan buat mereka menumpuk secara vertikal,
dan ingat untuk memberikan ukuran font baru untuk tubuh sehingga semua sub-elemen mewarisi font yang lebih besar dan menjadi lebih mudah dibaca.
6- Ulangi tes responsif dan tentukan break point kedua Anda, Kemungkinan besar Anda tidak akan mendapatkan banyak break point karena kami menggunakan desain cairan di sini dan di situlah menggunakan persentase akan mengembalikan!
Saya bekerja di situs web besar dengan elemen desain berat sebelumnya dan hanya membutuhkan 2 pertanyaan media :)
Semoga itu bisa membantu