Desain responsif dengan media query

Tanpa satu tag meta, banyak ponsel menata halaman seolah-olah layarnya jauh lebih lebar (MDN memberi contoh 980 piksel) lalu mengecilkannya, sehingga media query untuk ponsel tidak pernah berjalan.

Satu halaman, semua layar

Desain responsif berarti membangun satu halaman yang menyesuaikan diri dengan layar apa pun tempat ia dibuka, dari ponsel sempit sampai monitor lebar, alih-alih membuat situs seluler terpisah. Desain ini bertumpu pada tiga gagasan: tata letak dari lebar yang lentur, bukan lebar tetap; media yang berskala di dalam wadahnya; dan media query yang menyesuaikan tata letak di titik-titik tempat tata letak itu mulai rusak. Flexbox dan grid sudah mengerjakan banyak bagian, seperti terlihat di dua unit sebelumnya dengan kartu yang membungkus dan kolom auto-fill.

Tag meta viewport

Banyak ponsel menggambar halaman dalam viewport virtual yang lebih lebar daripada layar, MDN memberi contoh 980 piksel, lalu mengecilkan hasilnya, karena situs lama dibuat untuk desktop. Bagi halaman yang dirancang untuk menyesuaikan diri, ini mengganggu: media query yang seharusnya aktif di bawah 600 piksel tidak pernah berjalan, karena browser mengira layarnya 980 piksel. <meta name="viewport" content="width=device-width"> di head memberi tahu browser agar memakai lebar perangkat yang sebenarnya, diukur dalam piksel CSS. Jangan pernah menambahkan user-scalable=no atau maximum-scale yang rendah; MDN memperingatkan bahwa memblokir zoom menyingkirkan orang dengan penglihatan lemah, dan WCAG 1.4.4 mengharapkan teks bisa diperbesar sampai 200 persen.

Lebar dan gambar yang lentur

Lebar tetap adalah penyebab paling umum gulir ke samping di ponsel. Utamakan max-width daripada width: max-width: 70rem pada pembungkus halaman membuatnya memenuhi layar kecil dan berhenti membesar di layar besar. Secara bawaan, gambar mempertahankan ukuran piksel aslinya, jadi foto 1200 piksel tumpah keluar dari layar 390 piksel. img { max-width: 100%; height: auto; } membuat gambar mengecil sesuai wadahnya sambil menjaga proporsinya. WCAG 1.4.10, Reflow, meminta konten tetap berfungsi pada lebar 320 piksel CSS tanpa gulir ke dua arah; memeriksa halamanmu di jendela selebar 320 piksel adalah kebiasaan yang baik.

Media query

Media query membungkus aturan yang hanya berlaku saat sebuah kondisi terpenuhi. @media (min-width: 600px) { ... } menerapkan aturannya saat viewport paling sedikit 600 piksel lebarnya. Pendekatan yang lazim adalah mobile first: tulis gaya dasar untuk layar sempit, yang sering kali paling sederhana (satu kolom, semuanya bertumpuk), lalu tambahkan query min-width yang menata ulang saat ruang bertambah. Pilih breakpoint di titik tempat kontenmu mulai terlihat janggal, bukan dengan menebak ukuran perangkat populer, karena ukuran layar baru muncul setiap tahun. Menulis breakpoint dalam em, seperti 40em, juga membuatnya ikut menanggapi saat pembaca memperbesar teks.

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

Hal lain yang bisa ditanyakan query

Media query bisa menguji lebih dari lebar. Fitur preferensi pembaca berasal dari Media Queries Level 5: (prefers-color-scheme: dark) cocok saat pembaca memilih tema gelap di sistem operasi, jadi kamu bisa menawarkan warna gelap secara otomatis. (prefers-reduced-motion: reduce) cocok saat pembaca meminta gerakan dikurangi, sering karena animasi membuat mereka pusing; matikan gerakan besar dan efek paralaks di dalamnya. (hover: hover), dari Level 4, memberi tahu apakah penunjuk utama bisa melayang (hover), yang tidak bisa dilakukan layar sentuh. print menata halaman untuk kertas, misalnya dengan menyembunyikan menu. Terakhir, clamp() mengatur ukuran dengan mulus tanpa query: font-size: clamp(1.5rem, 4vw, 2.5rem) membesar mengikuti layar tetapi tidak pernah di bawah 1.5rem atau di atas 2.5rem.