Query Lebar Tinggi dan Orientasi
Targetkan dimensi viewport dan orientasi perangkat tertentu menggunakan fitur media.
Query Lebar Tinggi dan Orientasi adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Fitur Media width
Fitur width menargetkan lebar area pandang. Gunakan min-width dan max-width untuk menentukan rentang.
<div class="box">width feature demo</div>
Fitur Media height
Fitur height menargetkan tinggi area pandang. Fitur ini berguna untuk area pandang yang pendek, seperti pada ponsel dalam orientasi lanskap, ketika ruang vertikal terbatas.
<div class="hero">Hero (grows on tall viewports)</div>
Pola Area Pandang Pendek
Deteksi area pandang yang pendek dan kurangi padding atau tinggi yang dapat menyebabkan konten meluap:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait dan landscape
Fitur orientation mendeteksi apakah area pandang lebih tinggi (portrait) atau lebih lebar (landscape) daripada ukurannya dalam arah lainnya.
<div class="hero">Orientation-aware hero</div>
Rasio Piksel Perangkat
Targetkan layar dengan DPI tinggi (Retina) menggunakan fitur resolution atau fitur nonstandar tetapi didukung secara luas, yaitu -webkit-device-pixel-ratio.
<div class="logo"></div>
Fitur aspect-ratio
Targetkan rasio aspek area pandang tertentu. Fitur ini berguna untuk memusatkan konten dengan cara yang berbeda pada area pandang 4:3 dan 16:9.
<div class="video"></div>
Kapabilitas hover
Fitur hover: hover mendeteksi apakah input utama berupa penunjuk presisi yang dapat melakukan hover. Fitur ini berguna untuk gaya khusus perangkat sentuh.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
Fitur pointer
pointer: fine adalah kursor tetikus yang presisi; pointer: coarse adalah jari atau stilus. Fitur ini berguna untuk menyesuaikan ukuran target ketukan.
<button>Tap target</button>
Menggabungkan width dan height
Buat aturan khusus untuk ponsel dalam orientasi lanskap dengan menggabungkan min-width dan max-height:
<div class="nav">Nav bar</div>
Dimensi Area Pandang vs. Perangkat
Kueri media CSS menargetkan area pandang (jendela peramban), bukan dimensi layar fisik perangkat. Mengubah ukuran jendela peramban desktop akan mengubah lebar area pandang secara langsung.
Satuan Area Pandang dan Kueri Media
Kueri media dan satuan area pandang (vw, vh) merespons dimensi area pandang yang sama. Gunakan kueri media untuk perubahan tata letak dan satuan area pandang untuk ukuran fluida di dalam tata letak.
Pemeriksaan Singkat
Fitur media mana yang mendeteksi apakah perangkat memiliki penunjuk presisi yang dapat melakukan hover pada elemen?
Ringkasan
Fitur media mencakup width, height, orientation, resolution, hover, dan pointer. Gunakan fitur tersebut untuk menyesuaikan tata letak dengan dimensi area pandang dan kapabilitas perangkat. Fitur hover dan pointer membantu menargetkan perangkat sentuh dan tetikus, bukan hanya berdasarkan ukuran layar.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Query Lebar Tinggi dan Orientasi” gratis?
Ya — teks lengkap “Query Lebar Tinggi dan Orientasi” 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 “Query Lebar Tinggi dan Orientasi”?
Targetkan dimensi viewport dan orientasi perangkat tertentu menggunakan fitur media. 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 2 dari 4.
Berapa lama pelajaran “Query Lebar Tinggi dan Orientasi” 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