Menggabungkan Beberapa Media Query
Gunakan operator and, or, dan not untuk menggabungkan fitur media menjadi query yang kompleks.
Menggabungkan Beberapa Media Query adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Operator and
Kata kunci and mengharuskan semua kondisi terpenuhi secara bersamaan. Ini berguna untuk menargetkan ukuran dan jenis perangkat tertentu secara bersamaan.
<div class="box">and operator demo</div>
Rentang dengan and
Menggabungkan min-width dan max-width dengan and menargetkan rentang lebar area pandang tertentu (gaya khusus tablet):
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
Koma sebagai OR
Kueri yang dipisahkan dengan koma bekerja seperti OR — gaya diterapkan jika kueri APA PUN cocok:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
Operator Negasi
not menegasikan seluruh kueri media. Gunakan dengan hati-hati — operator ini diterapkan pada seluruh ekspresi kueri, bukan hanya kondisi pertama.
<div class="doc">not operator demo</div>
not dengan Tanda Kurung (Modern)
Kueri media Level 4 modern memungkinkan not() digunakan sebagai fungsi pada fitur individual:
<div class="panel">not() function demo</div>
Kata Kunci only (Lama)
Kata kunci only digunakan untuk menyembunyikan kueri media dari peramban lama yang tidak mendukung fitur media. Peramban modern mengabaikannya, tetapi kata kunci ini tidak berbahaya.
<div class="box">only keyword demo</div>
Penyarangan Kueri Media (Penyarangan CSS)
Dengan penyarangan CSS native, kueri media dapat ditulis di dalam blok pemilih:
<div class="card">Nested media query demo</div>
Kombinasi Seluler + DPI Tinggi
Menargetkan perangkat seluler secara khusus (berukuran kecil dan berdensitas DPI tinggi):
<div class="icon"></div>
Cetak + Warna
Beberapa fitur media untuk gaya cetak yang hanya diterapkan pada pencetak warna:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
Kueri Media dalam @import
Kueri media dapat diterapkan saat impor untuk memuat seluruh lembar gaya secara kondisional (meskipun ini memblokir perenderan dan sebaiknya digunakan secara terbatas):
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
Properti Logis dalam Kueri Kompleks
Sebagai aturan praktis, kueri yang lebih sederhana lebih mudah dipelihara. Hindari merangkai terlalu banyak kondisi. Jika kueri menjadi kompleks, pertimbangkan untuk menyusun ulang pendekatan CSS, bukan kuerinya.
Cek Cepat
Kueri media mana yang menerapkan gaya ketika area pandang memiliki lebar minimal 600px ATAU perangkat berada dalam orientasi lanskap?
Ringkasan
and mengharuskan semua kondisi bernilai benar. Koma berfungsi sebagai OR di antara kueri. not menegasikan seluruh kueri. Gabungkan min-width dan max-width untuk menargetkan rentang. CSS modern mendukung penyarangan kueri media di dalam blok pemilih serta sintaks rentang untuk menghasilkan ekspresi yang lebih rapi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menggabungkan Beberapa Media Query” gratis?
Ya — teks lengkap “Menggabungkan Beberapa Media Query” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menggabungkan Beberapa Media Query”?
Gunakan operator and, or, dan not untuk menggabungkan fitur media menjadi query yang kompleks. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Menggabungkan Beberapa Media Query” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Sintaks dan Titik Henti Umum
- Query Lebar Tinggi dan Orientasi
- Prefers-Color-Scheme dan Prefers-Reduced-Motion
- Menggabungkan Beberapa Media Query