Kueri Media dan Pengembangan Mobile-First
Tuliskan titik henti dengan kueri media min-width, bangun tata letak seluler terlebih dahulu, lalu tingkatkan secara bertahap untuk layar yang lebih besar.
Kueri Media dan Pengembangan Mobile-First adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Kueri Media?
Kueri media menerapkan aturan CSS hanya saat kondisi tertentu terpenuhi — misalnya lebar area tampilan berada di atas ambang tertentu. Kueri media adalah dasar desain responsif, yang memungkinkan satu lembar gaya beradaptasi dengan ukuran layar apa pun.
Sintaks Dasar
Kueri media membungkus blok CSS dalam aturan @media. Aturan di dalamnya hanya diterapkan saat kondisinya cocok.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width vs max-width
min-width: terapkan gaya saat lebar area tampilan setidaknya sebesar ini (mengutamakan seluler). max-width: terapkan gaya saat lebar area tampilan paling besar sebesar ini (mengutamakan desktop). Utamakan min-width untuk pengembangan yang mengutamakan seluler.
/* 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 yang Mengutamakan Seluler
Tulis CSS untuk layar kecil terlebih dahulu (di luar kueri media apa pun). Lalu gunakan kueri media min-width untuk menambahkan kompleksitas secara bertahap pada layar yang lebih besar. Cara ini menghasilkan CSS yang lebih kecil bagi pengguna seluler dan kode yang lebih rapi secara keseluruhan.
.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 Umum
Pilih titik henti berdasarkan konten Anda, bukan perangkat tertentu. Titik awal yang populer: 480px (ponsel besar), 768px (tablet), 1024px (desktop kecil), 1280px (desktop besar). Hindari titik henti yang menargetkan model perangkat tertentu.
Jenis Media
Selain lebar layar, Anda dapat menargetkan jenis media: screen untuk layar dan print untuk printer. Kueri media cetak memungkinkan Anda menyesuaikan tampilan halaman saat dicetak (menyembunyikan navigasi, menyesuaikan warna).
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Menggabungkan Kondisi dengan and
Rangkai kondisi dengan and: terapkan gaya hanya jika keduanya benar. Gunakan not dan or untuk logika 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
Tanggapi preferensi mode gelap OS pengguna. Sediakan tema gelap secara default tanpa tombol pengalih.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Hormati pengguna yang memilih gerakan lebih sedikit (gangguan vestibular, epilepsi). Nonaktifkan atau sederhanakan animasi di dalam kueri media ini.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Kueri Kontainer — Masa Depan
Kueri kontainer (@container) menerapkan gaya berdasarkan ukuran kontainer induk, bukan area pandang. Kueri ini memungkinkan responsivitas yang benar-benar berada pada tingkat komponen dan tersedia di semua peramban modern sejak 2023.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Properti Logis untuk Dukungan RTL
Gunakan properti logis seperti margin-inline-start, bukan margin-left, untuk tata letak yang berfungsi dalam bahasa kiri-ke-kanan maupun kanan-ke-kiri. Jadikan tata letak responsif Anda siap menghadapi perubahan di masa depan.
Pemeriksaan Singkat
Pendekatan mana yang mendefinisikan strategi CSS yang mengutamakan seluler dengan benar?
Rangkuman: Kueri Media dan Pendekatan yang Mengutamakan Seluler
@media (min-width: N) digunakan untuk peningkatan progresif yang mengutamakan seluler. Tulis gaya dasar untuk seluler tanpa kueri. Tambahkan kompleksitas untuk layar yang lebih besar. Gunakan prefers-color-scheme untuk mode gelap. Gunakan prefers-reduced-motion untuk aksesibilitas. Gunakan kueri kontainer untuk responsivitas tingkat komponen.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Kueri Media dan Pengembangan Mobile-First” gratis?
Ya — teks lengkap “Kueri Media dan Pengembangan Mobile-First” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Kueri Media dan Pengembangan Mobile-First”?
Tuliskan titik henti dengan kueri media min-width, bangun tata letak seluler terlebih dahulu, lalu tingkatkan secara bertahap untuk layar yang lebih besar. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 “Kueri Media dan Pengembangan Mobile-First” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Tag Meta Area Tampilan
- Flexbox untuk Tata Letak
- CSS Grid untuk Tata Letak
- Kueri Media dan Pengembangan Mobile-First