Mengapa responsif
Bayangkan satu foto dan tiga ukuran bingkai, kecil, sedang, dan besar. Foto yang sama harus muat di ketiganya. Halaman web menghadapi masalah yang sama. Ponsel, tablet, laptop, dan TV punya lebar layar yang berbeda. Pembaca melihat situs yang sama di semua layar itu. Kalau tampilan dibuat untuk satu ukuran saja, di layar lain ia kepanjangan, kepotongan, atau terlalu kecil untuk dibaca.
Dari sinilah istilah responsif lahir. Responsif berarti tampilan menyesuaikan diri dengan lebar layar yang sedang dipakai. Tampilan tidak dibuat dalam satu ukuran tetap. Tampilan diberi aturan tentang bagaimana ia berubah saat lebar berubah. Dua alat utama dipakai untuk ini. Media query memutuskan kapan sebuah aturan berlaku, berdasarkan lebar layar. Unit relatif membuat ukuran mengalir mengikuti lebar. Bab ini membahas keduanya.
Viewport dan unit
Sebelum melangkah, kenali satu istilah. Viewport adalah bagian halaman yang terlihat di layar, jadi pada ponsel lebar jendela browser itu sempit, pada laptop lebih lebar. Pada TV sangat lebar. Semua kerja responsif mengacu pada lebar viewport ini.
Sejak bab 3 kamu menulis angka seperti 2rem dan 1px. Angka itu adalah unit, satuan untuk mengukur ukuran. px adalah piksel, satu titik tetap di layar. Nilai px tidak berubah walau layar berubah. Itu sebabnya memakai px saja menyulitkan tampilan responsif. Maka ada unit relatif, unit yang menghitung ukurannya dari acuan lain yang ikut berubah.
Unit relatif
Unit relatif menghitung ukuran dari acuan lain. Acuan itu bisa elemen induk, ukuran huruf dasar, atau lebar viewport. Kalau acuannya berubah, ukurannya ikut berubah. Empat unit yang paling dipakai dijelaskan di sini.
Persen, ditulis %, mengikuti induknya. Satu kolom dengan width: 50% selalu mengambil setengah lebar elemen yang menampungnya, apa pun lebarnya. Persen bagus untuk membagi ruang secara proporsi.
rem mengikuti ukuran huruf akar halaman, elemen <html>, biasanya 16 piksel di browser. Satu rem adalah 16 piksel itu, jadi 2rem adalah 32 piksel. Kata rem singkatan dari root em. rem mudah ditebak karena selalu mengacu satu angka dasar, dan karena itu paling sering dipakai untuk ukuran huruf dan jarak.
em serupa, tapi mengikuti ukuran huruf elemen tempat ia dipakai, bukan akar halaman.
vw singkatan dari viewport width, dan satu vw adalah satu persen dari lebar viewport. vh mengikuti tinggi viewport. Kalau layar selebar 1000 piksel, satu vw adalah 10 piksel. vw berguna untuk elemen yang harus mengikuti lebar jendela secara langsung.
Aturan praktisnya begini. Pakai rem untuk ukuran huruf dan jarak, agar semua bagian berubah konsisten saat ukuran huruf dasar diubah. Pakai persen untuk proporsi di dalam satu kotak. Pakai vw untuk yang mengikuti lebar jendela. Ini panduan, bukan hukum.
clamp, ukuran yang dibatasi
Saat vw dipakai untuk ukuran huruf, ada risiko. Teks jadi terlalu kecil di layar sempit dan terlalu besar di layar lebar, karena mengikuti lebar sepenuhnya. clamp() membatasi.
font-size: clamp(1rem, 4vw, 2.5rem);clamp() menerima tiga nilai: batas bawah, nilai yang diharapkan, dan batas atas. CSS memakai nilai tengah, 4vw, selama ia tidak keluar dari batas bawah dan atas. Di layar sangat sempit, 4vw bisa berada di bawah 1rem, maka yang dipakai 1rem. Di layar sangat lebar, 4vw bisa melebihi 2.5rem, maka yang dipakai 2.5rem. Di antaranya teks mengalir mengikuti lebar. Hasilnya ukuran yang berubah mulus, tidak pernah terlalu kecil dan tidak pernah terlalu besar.
Media query, aturan bersyarat
Unit relatif membuat ukuran mengalir mulus. Tapi ada saatnya kamu ingin keputusan yang keras: di layar lebar tampilkan tiga kolom, di layar sempit tampilkan satu kolom. Di sinilah media query masuk.
Media query adalah cara menulis aturan CSS yang hanya berlaku bila kondisi tertentu benar. Bentuk yang paling umum mengecek lebar viewport.
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}Baris @media (min-width: 640px) menyatakan, bila lebar viewport paling tidak 640 piksel, terapkan aturan di dalam kurung kurawal. Kalau lebih sempit, aturan diabaikan. min-width adalah batas bawah. Ada juga max-width, batas atas, yang berlaku bila lebar tidak melebihi angka itu.
Angka tempat sebuah aturan berubah, seperti 640 di atas, disebut ambang, dan di kalangan pengembang, breakpoint. Pilih ambang dengan melihat kapan tampilan mulai terasa sempit, bukan dengan menebak merk ponsel. Mulai dari lebar paling kecil, lalu tambah aturan min-width untuk layar yang lebih lebar.
Analogi: meja yang bisa dipanjangkan
Satu gambar merangkum dua alat tadi. Bayangkan meja makan yang bisa dipanjangkan. Ruang makan yang sempit hanya menampung meja pendek untuk dua orang. Ruang yang luas menampung meja dengan daun tambahan untuk delapan orang. Kamu menambah daun hanya saat ruang cukup. Angka lebar ruang yang cukup itu adalah ambang. Media query seperti keputusan menambah daun: bila ruang paling tidak sekian, pasang daun, muat lebih banyak.
Piring di atas meja memakai logika unit relatif. Separuh meja selalu separuh meja, besar atau kecil. Satu piring yang mengambil setengah meja tetap setengah, berapa pun panjang meja. Porsi yang mengikuti ukuran meja seperti ini adalah unit relatif. Lebar ruang makan mewakili lebar viewport, meja mewakili tampilan halaman.
Pasangan contoh
Kode di bawah membuat satu set kartu yang jumlah kolomnya berubah. Versi vanilla menulis elemen HTML lalu aturan media query di CSS. Versi React menulis komponen yang menghasilkan elemen yang sama, dan media query di CSS bekerja sama saja.
Vanilla JavaScript
<div class="grid">
<div class="kartu">Kartu satu</div>
<div class="kartu">Kartu dua</div>
<div class="kartu">Kartu tiga</div>
</div>
<style>
.kartu { font-size: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
</style>React
function GridKartu() {
return (
<div className="grid">
<div className="kartu">Kartu satu</div>
<div className="kartu">Kartu dua</div>
<div className="kartu">Kartu tiga</div>
</div>
);
}Perbedaan inti ada pada asal elemen. Di vanilla, kamu menulis elemen dan aturan CSS di tempat yang terpisah tapi terbuka. Di React, elemen lahir dari komponen, dan aturan CSS tetap tinggal di file CSS. Responsif adalah kerja CSS, bukan kerja framework, jadi media query dan unit relatif yang kamu tulis berlaku sama di kedua versi. React hanya menyingkat cara elemen dibuat, tidak mengubah cara ukurannya dihitung.
Demo Hidup
Demo di bawah memakai tiga alat bab ini sekaligus. Media query menetapkan jumlah kolom pada ambang lebar. Grid membagi ruang dan kartu mengisi secara proporsional. Ukuran huruf memakai rem dan clamp(). Geser jendela, persempit dan lebarkan, lalu perhatikan kolom berubah dan angka lebar di bawah mengikuti.
Lebarkan dan sempitkan jendela browser kamu. Jumlah kolom kartu berubah pada ambang tertentu.
Kartu satu
Grid membagi ruang secara proporsional, jadi kartu mengisi.
Kartu dua
Judul memakai clamp(), tidak mengecil atau membesar berlebihan.
Kartu tiga
rem memakai satu angka dasar yang konsisten untuk jarak dan huruf.
Lebar layar: geser jendela dan lihat angkanya bertambah di sini.
Begini cara baca demonya. Di bawah lebar 480 piksel, grid memakai satu kolom. Antara 480 dan 760 piksel, dua kolom. Di atas 760 piksel, tiga kolom. Ambang itu dipilih media query. Sementara itu lebar kartu dan ukuran huruf bergerak terus mengikuti lebar, berkat persen, rem, dan clamp().
Ringkasan bab ini. Responsif berarti tampilan menyesuaikan lebar viewport. Unit relatif, seperti persen, rem, dan vw, membuat ukuran mengikuti acuan yang berubah. clamp() membatasi ukuran agar tidak ekstrem. Media query memberlakukan aturan pada ambang lebar tertentu. Dengan ini satu halaman nyaman dibaca di ponsel maupun di layar lebar. Bab berikutnya mulai menyentuh JavaScript.