Pertanyaan Media dan Pembangunan Utamakan Mudah Alih
Tulis titik henti dengan pertanyaan media min-width, bina susun atur mudah alih dahulu dan tingkatkan secara berperingkat untuk skrin lebih besar.
Pertanyaan Media dan Pembangunan Utamakan Mudah Alih ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 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 Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah Pertanyaan Media?
Pertanyaan media menggunakan peraturan CSS hanya apabila syarat tertentu benar — contohnya apabila lebar viewport melebihi nilai ambang. Pertanyaan ini menjadi asas reka bentuk responsif dan membolehkan satu lembar gaya menyesuaikan diri dengan sebarang saiz skrin.
Sintaks Asas
Pertanyaan media membungkus satu blok CSS dalam peraturan @media. Peraturan di dalamnya hanya diterapkan apabila syarat sepadan.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width berbanding max-width
min-width: terapkan gaya apabila viewport sekurang-kurangnya selebar ini (pendekatan mudah alih dahulu). max-width: terapkan gaya apabila viewport sebesar-besarnya selebar ini (desktop dahulu). Utamakan min-width untuk pembangunan mudah alih dahulu.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Pendekatan Mudah Alih Dahulu
Tulis CSS untuk skrin kecil dahulu (di luar sebarang pertanyaan media). Kemudian gunakan pertanyaan media min-width untuk menambah kerumitan secara berperingkat bagi skrin yang lebih besar. Ini menghasilkan CSS yang lebih kecil untuk pengguna mudah alih dan kod keseluruhan yang lebih kemas.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}Titik Henti Lazim
Pilih titik henti berdasarkan kandungan anda, bukan peranti tertentu. Titik permulaan yang popular: 480px (telefon besar), 768px (tablet), 1024px (desktop kecil) dan 1280px (desktop besar). Elakkan titik henti yang menyasarkan model peranti tertentu.
Jenis Media
Selain lebar skrin, anda boleh menyasarkan jenis media: screen untuk paparan dan print untuk pencetak. Kueri media cetak membolehkan anda menyesuaikan rupa halaman apabila dicetak (sembunyikan navigasi, laraskan warna).
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Menggabungkan Syarat dengan and
Rantaikan syarat dengan and: gunakan gaya hanya apabila kedua-duanya benar. Gunakan not dan or untuk logik yang lebih kompleks.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
Berikan respons terhadap pilihan mod gelap OS pengguna. Sediakan tema gelap secara lalai tanpa togol.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Hormati pengguna yang memilih kurang pergerakan (gangguan vestibular, epilepsi). Lumpuhkan atau ringkaskan animasi dalam kueri media ini.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Kueri Bekas — Masa Depan
Kueri bekas (@container) menggunakan gaya berdasarkan saiz bekas induk dan bukannya ruang pandang. Kueri ini membolehkan reka bentuk responsif benar-benar pada peringkat komponen, dan tersedia dalam semua pelayar moden sejak 2023.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Sifat Logik untuk Sokongan RTL
Gunakan sifat logik seperti margin-inline-start dan bukannya margin-left untuk reka letak yang berfungsi dalam bahasa kiri ke kanan dan kanan ke kiri. Jadikan reka letak responsif anda sesuai untuk masa hadapan.
Semakan Pantas
Pendekatan manakah yang mentakrifkan strategi CSS utamakan mudah alih dengan betul?
Imbas Kembali: Kueri Media dan Utamakan Mudah Alih
@media (min-width: N) untuk peningkatan berperingkat yang mengutamakan mudah alih. Tulis gaya asas untuk mudah alih tanpa kueri. Tambahkan kerumitan untuk skrin yang lebih besar. Gunakan prefers-color-scheme untuk mod gelap. Gunakan prefers-reduced-motion untuk kebolehcapaian. Gunakan kueri bekas untuk reka bentuk responsif pada peringkat komponen.
Pelajari HTML 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
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Pertanyaan Media dan Pembangunan Utamakan Mudah Alih” percuma?
Ya — teks penuh “Pertanyaan Media dan Pembangunan Utamakan Mudah Alih” 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 Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pertanyaan Media dan Pembangunan Utamakan Mudah Alih”?
Tulis titik henti dengan pertanyaan media min-width, bina susun atur mudah alih dahulu dan tingkatkan secara berperingkat untuk skrin lebih besar. Anda berlatih Frontend 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 Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend 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 4 daripada 4.
Berapa lamakah pelajaran “Pertanyaan Media dan Pembangunan Utamakan Mudah Alih” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Tag Meta Ruang Pandang
- Flexbox untuk Susun Atur
- CSS Grid untuk Susun Atur
- Pertanyaan Media dan Pembangunan Utamakan Mudah Alih