Pertanyaan Lebar Tinggi dan Orientasi
Sasarkan dimensi ruang pandang dan orientasi peranti tertentu dengan ciri media.
Pertanyaan Lebar Tinggi dan Orientasi ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Ciri Media width
Ciri width menyasarkan lebar ruang pandang. Gunakan min-width dan max-width untuk menentukan julat.
<div class="box">width feature demo</div>
Ciri Media height
Ciri height menyasarkan ketinggian ruang pandang. Ciri ini berguna untuk ruang pandang pendek, seperti telefon dalam orientasi landskap, apabila ruang menegak terhad.
<div class="hero">Hero (grows on tall viewports)</div>
Corak Ruang Pandang Pendek
Kesan ruang pandang pendek dan kurangkan jarak dalaman atau ketinggian yang boleh menyebabkan kandungan melimpah:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait dan landscape
Ciri orientation mengesan sama ada ruang pandang lebih tinggi (portrait) atau lebih lebar (landscape) berbanding arah yang satu lagi.
<div class="hero">Orientation-aware hero</div>
Nisbah Piksel Peranti
Sasarkan skrin ber-DPI tinggi (Retina) dengan ciri resolution atau -webkit-device-pixel-ratio yang bukan standard tetapi disokong secara meluas.
<div class="logo"></div>
Ciri aspect-ratio
Sasarkan nisbah aspek ruang pandang tertentu. Ciri ini berguna untuk memusatkan kandungan secara berbeza dalam ruang pandang 4:3 berbanding 16:9.
<div class="video"></div>
Keupayaan hover
Ciri hover: hover mengesan sama ada masukan utama ialah penuding tepat yang boleh melakukan hover. Ciri ini berguna untuk gaya khusus peranti sentuh.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
Ciri pointer
pointer: fine ialah kursor tetikus yang tepat; pointer: coarse ialah jari atau stilus. Ciri ini berguna untuk melaraskan saiz sasaran ketikan.
<button>Tap target</button>
Menggabungkan width dan height
Cipta peraturan khusus untuk telefon dalam orientasi landskap dengan menggabungkan min-width dan max-height:
<div class="nav">Nav bar</div>
Dimensi Ruang Pandang berbanding Peranti
Pertanyaan media CSS menyasarkan ruang pandang (tetingkap pelayar), bukannya dimensi skrin fizikal peranti. Mengubah saiz tetingkap pelayar desktop mengubah lebar ruang pandang dalam masa nyata.
Unit Ruang Pandang dan Pertanyaan Media
Pertanyaan media dan unit ruang pandang (vw, vh) bertindak balas terhadap dimensi ruang pandang yang sama. Gunakan pertanyaan media untuk perubahan susun atur dan unit ruang pandang untuk penentuan saiz fleksibel dalam sesuatu susun atur.
Semakan Pantas
Ciri media manakah yang mengesan sama ada peranti mempunyai penuding tepat yang boleh melakukan hover pada elemen?
Rumusan
Ciri media merangkumi width, height, orientation, resolution, hover dan pointer. Gunakannya untuk menyesuaikan susun atur dengan dimensi ruang pandang dan keupayaan peranti. Ciri hover dan pointer membantu menyasarkan peranti sentuh berbanding tetikus, bukan hanya berdasarkan saiz skrin.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Pertanyaan Lebar Tinggi dan Orientasi” percuma?
Ya — teks penuh “Pertanyaan Lebar Tinggi dan Orientasi” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pertanyaan Lebar Tinggi dan Orientasi”?
Sasarkan dimensi ruang pandang dan orientasi peranti tertentu dengan ciri media. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Pertanyaan Lebar Tinggi dan Orientasi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Sintaks dan Titik Henti Lazim
- Pertanyaan Lebar Tinggi dan Orientasi
- Prefers-Color-Scheme dan Prefers-Reduced-Motion
- Menggabungkan Berbilang Pertanyaan Media