Tutorial CSS / Media Query CSS dan Breakpoint Berdasarkan Konten

Media query menerapkan CSS ketika kondisi lingkungan tertentu terpenuhi, seperti ambang lebar viewport. Pilih breakpoint di mana konten aktual membutuhkan layout berbeda, dan pertimbangkan baik lebar komponen maupun spasi sekitarnya.

Gabungkan gaya dasar dan gaya bersyarat

Aturan di luar media query menyediakan baseline. Ketika sebuah kondisi terpenuhi, deklarasinya bergabung dengan kaskade; mereka tidak menghapus deklarasi baseline yang tidak terkait. Sebelum menambahkan breakpoint, periksa apakah ukuran fluid dapat menampung konten secara alami. Lihat Ukuran Fleksibel CSS: max-width, min(), dan clamp().

.cards { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 33rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Cuplikan 33rem di atas menunjukkan sintaks dan kebutuhan lebar bagian dalam untuk dua kolom. Contoh lengkap di bawah memakai 35rem setelah menambahkan padding kontainer. Selektor yang sama dan penulisan gaya dasar lebih dahulu memungkinkan deklarasi bersyarat berikutnya menimpa properti itu dalam kondisi kaskade yang setara. Anda tidak boleh menyimpulkan bahwa “kode di bawah ini akan selalu menang” dalam semua kasus. Bandingkan urutan deklarasi ketika tingkat kepentingan, prioritas lapisan kaskade, dan selektor, dll. sama. Jika kondisinya benar tetapi tidak ada perubahan, periksa apakah coretan muncul di aturan lain di alat pengembang.

Hitung breakpoint dari persyaratan kartu

Pertama, periksa seberapa lebar sebuah kartu mulai sulit dibaca. Dalam praktiknya, tujuan lebar minimum termasuk border dan padding kartu ditetapkan sebesar 16rem. Ini bukan nilai standar yang akan cocok untuk setiap situs, tetapi merupakan persyaratan desain untuk contoh ini. Anda sebaiknya mencoba menyertakan judul dan deskripsi yang panjang dan mengubahnya agar sesuai dengan font dan konten yang sebenarnya.

Lebar konten yang diperlukan untuk dua kolom adalah 33rem, yaitu 16rem×2 ditambah jarak kolom 1rem. Jika padding kiri dan kanan teks masing-masing 1rem, lebar viewport yang diperlukan adalah 35rem. Oleh karena itu, dalam seluruh contoh di pelajaran ini, kita akan memulai kedua kolom pada 35rem. Tiga kolom adalah 16rem×3 + jarak 1rem×2 + padding kontainer kiri dan kanan 2rem. Dibutuhkan 52rem.

Alasan kami tidak menambahkan ruang di dalam kartu kembali ke dalam perhitungan tabel adalah karena kami sudah memasukkannya dalam target lebar minimum kami sebesar 16rem. Sebaliknya, jika konten utama membagi lebar dari bilah sisi, sulit untuk menjamin ruang kartu hanya dengan viewport. Dalam kasus itu, pertimbangkan untuk menghitung ulang kondisi tata letak luar atau menentukan tata letak internal bagian menggunakan Container Query CSS untuk Komponen yang Dapat Dipakai Ulang.

Memahami batasan rem dan inklusif

min-width sah ketika nilainya sama dengan atau lebih besar dari lebar yang ditentukan, dan max-width sah ketika nilainya sama dengan atau lebih kecil dari lebar yang ditentukan. Jika ukuran font awal Anda adalah 16px, 35rem adalah 560px dan 52rem adalah 832px. Kami tidak selalu menjelaskan rem sebagai nilai px tetap, karena nilai yang dikonversi dapat bervariasi tergantung pada pengaturan font awal pengguna atau browser.

Panjang relatif dalam media query menggunakan nilai awal, bukan ukuran font yang diganti oleh CSS halaman. Misalnya, menambahkan html { font-size: 32px; } ke CSS tidak secara otomatis membuat kondisi 35rem menjadi kondisi 1120px. Perlu dibuat perbedaan antara perubahan ukuran rem pada teks dan perubahan pada kondisi media. Prinsip ini dijelaskan dalam spesifikasi Media Query CSS berbasis unit.

/* Both conditions are true even at 560px. */
@media (max-width: 560px) { /* narrow screen rule */ }
@media (min-width: 560px) { /* wide screen rule */ }

Seperti yang ditunjukkan di atas, kondisi min dan max dengan batas yang sama saling tumpang tindih pada titik yang cocok. Anda dapat mengurangi masalah ini dengan menambahkan kondisi default dan lebar minimum secara bertahap. Kondisi dua kolom dan tiga kolom juga berlaku pada layar besar, tetapi menggunakan selektor yang sama dan properti yang sama seperti pada contoh lengkap dan menulis aturan tiga kolom setelahnya menghasilkan langkah yang diinginkan.

Perluas dari satu kolom menjadi dua dan tiga kolom

Simpan sebagai file media-breakpoint.html dan buka di peramban Anda. Tidak ada file eksternal yang diperlukan. Saya menempatkan tiga kartu dengan judul dan tautan, serta menambahkan teks panjang agar teks tetap terbaca meskipun agak panjang.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>media-breakpoint.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.content { width: min(100%, 70rem); margin-inline: auto; padding: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; background: #eef5fa; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card a { display: inline-block; padding: .5rem; }
@media (min-width: 35rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="content"><h1>Choose breakpoints based on the content</h1>
<p>The target minimum card width is 16rem, including the border and padding.</p>
<div class="cards">
<article class="card"><h2>Files and screen settings to prepare</h2><p>The description and link should follow naturally even when the heading wraps onto several lines.</p><a href="#result">Read the first description</a></article>
<article class="card"><h2>Options for narrow screens</h2><p>Reduce the number of columns to make room instead of simply shrinking the text.</p><a href="#result">Read the second description</a></article>
<article class="card"><h2>English identifier</h2><p>ARTICLE_REFERENCE_WITHOUT_SPACES_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><a href="#result">Read the third description</a></article>
</div><p id="result">Check that links and keyboard focus remain visible on the screen.</p></main>
</body>
</html>

Mengatur batas minimum track ke nol dengan minmax(0, 1fr) serta min-width: 0 pada kartu membantu mencegah kolom meluas keluar layar akibat konten yang panjang. Namun, tujuan contoh ini adalah untuk mengurangi jumlah kolom, bukan memaksa hanya huruf agar muat. Pada lebar maksimum area .content sebesar 70rem, kolom tidak terus menyebar tanpa akhir, tetapi tiga kartu membagi sisa ruang.

Uji segera di sekitar setiap breakpoint

1. Bandingkan 559px, 560px, dan 561px dalam lingkungan dengan ukuran font awal 16px. 559px harus 1 kolom, 560px harus 2 kolom.
2. Bandingkan 831px, 832px, dan 833px. 831px harus 2 kolom, 832px harus 3 kolom. Ukur apakah lebar kartu mencapai target 16rem pada ambang tersebut. Jika bilah gulir atau ruang luar lain mengurangi lebar aktual kontainer, sesuaikan breakpoint berdasarkan ruang yang benar-benar tersedia.
3. Ubah hanya breakpoint dua kolom dari 35rem menjadi 30rem. Pada 480px, perhatikan jika lebar kartu menjadi lebih kecil dari target dan jumlah baris judul meningkat, lalu kembalikan ke 35rem.
4. Kondisi yang secara signifikan mengubah pengaturan font bawaan browser dan kondisi yang hanya mengubah font html CSS dicatat. Jangan menganggapnya sebagai eksperimen yang sama, tetapi periksa ulang lebar dan penempatan kartu di setiap kondisi.

Media query dapat menguji orientasi, kemampuan input, dan preferensi untuk gerakan yang dikurangi serta lebar. Layar sempit tidak selalu berarti perangkat layar sentuh, dan layar lebar tidak menjamin adanya mouse. Selesaikan terlebih dahulu tata letak berbasis lebar, kemudian tambahkan kondisi lain jika fitur memerlukannya. Panduan MDN untuk menggunakan media query menjelaskan sintaks dan kondisi lingkungannya.