Penggunaan perangkat mobile seperti smartphone untuk menjelajahi web berkembang dengan cepat, akan namun sayangnya tidak semua laman web sudah dioptimalkan untuk perangkat mobile. Perangkat mobile mirip smartphone sering terkendala dengan ukuran layar dan membutuhkan pendekatan berbeda dalam bagaimana konten ditampilkan di layar. Terdapat banyak sekali ukuran layar yang berlainan untuk smartphone, tablet, desktop, TV, dan bahkan perangkat yang lain. Ukuran layar selalu berubah, jadi sangat penting agar situs web dapat menyesuaikan dengan tiap ukuran layar.
Kueri media CSS biar responsif
Media kueri merupakan filter yang sederhana yang mampu diimplementasikan pada style CSS. Media kueri bisa memudahkan dalam mengganti style konten web menurut karakteristik dari perangkat yang merender konten web, tergolong tipe tampian, tinggi, lebar,resolusi dan juga orientasi layar.
- Pergunakan media kueri dalam mengimplimentasikan style berdasarkan karaktristik perangkat.
- Pergunakan min-width di atas min-device-width dalam memastikan pengalaman yang terluas bagi pengguna.
- Pergunakan ukuran yang relatif untuk bagian supaya tidak menghancurkan tata letak atau layout.
Contohnya,kau mampu menaruh semua style yang diperlukan untuk fitur cetak dalam media kueri cetak.
Di samping memakai atribut media di tautan style sheet, terdapat dua cara lain dalam menerapkan media kueri yang bisa disematkan dalam file CSS: @media dan @import. Karena alasan kinerja, salah satu dari dua metode pertama tersebut diusulkan pada sintaks @import.
@media print
/* print style sheets go here */
@import url(print.css) print;
Logika yang berlaku untuk kueri media yakni tidak saling pribadi, dan untuk setiap filter yang memenuhi patokan tersebut maka blok CSS yang dihasilkan akan dipraktekkan dengan menggunakan aturan tolok ukur prioritas sesuai CSS.
Menggunakan kueri media berdasarkan ukuran penampilan
Kueri media dapat memungkinkan kamu untuk menciptakan pengalaman responsif dikala style tertentu diaplikasikan ke layar kecil, layar besar, dan semua layar. Sintaks kueri media memungkinkan untuk pengerjaan aturan yang bisa dipraktekkan tergantung pada karakteristik perangkat.
@media (query)
/* CSS Rules used when query matches */
Meskipun terdapat beberapa item berbeda yang bisa dikuerikan, yang paling biasa dab sering diterapkan untuk desain web responsif yaitu min-width, max-width, min-height, dan max-height.
| Parameter | Keterangan |
| max-height | Aturan diterapkan untuk setiap web browser yang memiliki tinggi lebih kecil dari nilai yang didefinisikan dalam kueri. |
| max-width | Aturan diterapkan untuk setiap web browser yang mempunyai lebar lebih kecil dari nilai yang didefinisikan dalam kueri. |
| min-height | Aturan diterapkan untuk setiap web browser yang mempunyai tinggi lebih besar dari nilai yang didefinisikan dalam kueri. |
| min-width | Aturan diterapkan untuk setiap web browser yang memiliki lebar lebih besar dari nilai yang didefinisikan dalam kueri. |
| orientation=landscape | Aturan untuk setiap web browser dikala lebarnya lebih besar dari tingginya. |
| orientation=portrait | Aturan diterapkan untuk setiap web browser dikala tingginya lebih besar dari atau sama dengan lebarnya. |
Contoh :
- Ketika web browser lebarnya antara 0 px dan 640 px, diterapkan max-640px.css.
- Ketika web browser lebarnya antara 500 px dan 600 px, gaya dalam @media akan dipraktekkan.
- Ketika web browser lebarnya 640 px atau lebih, diterapkan min-640px.css.
- Ketika web browser lebarnya lebih besar ketimbang tingginya, diterapkan landscape.css.
- Ketika web browser tingginya lebih besar daripada lebarnya, dipraktekkan portrait.css.
min-device-width
Adalah mungkin juga membuat kueri menurut min-device-width, walaupun praktik ini sangat tidak disarankan.
Perbedaannya sungguh kecil namun sangat penting: min-width didasarkan pada ukuran jendela browser sedangkan min-device-width didasarkan pada ukuran layar. Sayangnya beberapa browser, termasuk browser Android lama, tidak melaporkan lebar perangkat dengan benar; browser tersebut melaporkan ukuran layar dalam satuan piksel perangkat, bukan dalam lebar penampilan yang terlihat yang dibutuhkan.
Selain itu, menggunakan min-device-width bisa menangkal bahan diadaptasikan pada desktop atau perangkat lain yang memperbolehkan jendela diubah ukurannya sebab kueri didasarkan pada ukuran perangkat yang sesungguhnya, bukan ukuran jendela browser.
Gunakan any-pointer dan any-hover
Dimulai dengan Chrome 39, style sheet Anda mampu menulis selektor yang meliputi beberapa tipe pointer dan sikap arahkan ke atas. Fitur media any-pointer dan any-hover seperti dengan pointer dan hover dalam mengizinkan Anda untuk melaksanakan kueri kesanggupan pointer pengguna. Namun, tidak seperti yang terakhir, any-pointer dan any-hover beroperasi pada gabungan dari semua perangkat pointer dan bukan cuma perangkat pointer utama.
Menggunakan unit relatif
Konsep penting di balik desain responsif yakni fluiditas dan proporsionalitas yang bertentangan dengan rancangan layout lebar tetap. Menggunakan unit relatif untuk pengukuran bisa membantu mempersempit layout dan mencegah kita secara tidak sengaja menciptakan komponen yang terlalu besar untuk tampilan yang terlihat.
Misalnya, setelan lebar: 100% pada div tingkat atas, memutuskan bahwa itu membentang meliputi lebar performa yang tampakdan tidak terlalu besar atau terlalu kecil untuk penampilan yang terlihat. div akan cocok, tidak menghiraukan apakah itu iPhone berlebar 320 px, Blackberry Z10 berlebar 342 px, atau suatu Nexus 5 yang berlebar 360 px.
Selain itu, memakai unit relatif memungkinkan browser untuk merender materi berdasarkan tingkat zoom pengguna tanpa perlu menambahkan bilah gulir horizontal ke laman.
Tidak direkomendasikan (Lebar tetap)
div.fullWidth
width: 320px;
margin-left: auto;
margin-right: auto;
Disarankan (Lebar responsif)
div.fullWidth
width: 100%;
Memilih breakpoint
Jangan mendefinisikan breakpoint berdasarkan kelas perangkat. Mendefinisikan breakpoint menurut perangkat, produk, nama merek, atau tata cara operasi tertentu yang dipakai dikala ini bisa mengakibatkan mimpi buruk dalam pemeliharaan. Malahan, materi itu sendiri yang mesti memilih bagaimana layout menyesuaikan dengan kontainer.
Buat breakpoint berdasarkan materi, jangan pernah menurut perangkat, produk, atau merek tertentu.
Desainlah untuk perangkat seluler terkecil lebih dulu; kemudian secara progresif mengembangkan pengalaman pengguna seiring bertambahnya properti layar.
Jaga jumlah maksimum baris teks sekitar 70 atau 80 abjad.
Memilih breakpoint utama dengan secara bertahap mulai dari layar kecil hingga ke besar.
Desain materi agar pas dengan ukuran layar kecil apalagi dulu, lalu perluas layar sampai breakpoint menjadi diharapkan. Ini memungkinkan Anda untuk mengoptimalkan breakpoint menurut materi dan menjaga jumlah breakpoint sesedikit mungkin.
Mari kita melakukan pekerjaan lewat acuan yang kita lihat di permulaan: prakiraan cuaca. Langkah pertama ialah menciptakan prakiraan terlihat cantik di layar kecil.
Berikutnya, ubah ukuran browser sampai ada terlalu banyak ruang putih antara komponen, dan performa prakiraan cuaca tampaktidak cantik. Keputusan ini sedikit subjektif, tetapi di atas 600px niscaya terlalu lebar.
Untuk memasukkan breakpoint pada 600 px, buat dua style sheet gres, satu untuk digunakan dikala browser 600 px dan kurang dari itu, dan satu dikala luasnya lebih dari 600 px.
Yang terakhir, optimalisasi CSS. Dalam pola ini, kami sudah menempatkan gaya lazim mirip font, ikon, pemosisian dasar, dan warna di weather.css. Layout tertentu untuk layar kecil lalu ditempatkan di weather-small.css, dan model layar besar ditempatkan di weather-large.css.
#developers.google.com
EmoticonEmoticon