CSS Academy · Pelajaran

Sintaks dan Titik Henti Umum

Pelajari sintaks media query dan titik henti standar yang digunakan dalam desain web modern.

Sintaks dan Titik Henti Umum adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Sintaksis Kueri Media

Kueri media membungkus aturan CSS dan menerapkannya hanya saat suatu kondisi terpenuhi. Sintaksis dasarnya:

<div class="box">Media query syntax demo</div>

Jenis Media

Jenis media yang paling umum:

all — berlaku untuk semua perangkat keluaran (bawaan)
screen — layar komputer dan ponsel
print — untuk pratinjau dan pencetakan
speech — pembaca layar

<div class="layout">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

Fitur Media

Fitur media menjelaskan karakteristik perangkat atau area pandang. Fitur yang umum: width, height, orientation, resolution, prefers-color-scheme, hover.

Kueri min-width

Fitur yang paling sering digunakan—menargetkan layar dengan lebar yang sama atau lebih besar daripada ambang batas tertentu. Gunakan pendekatan yang mengutamakan perangkat seluler.

<div class="box">Breakpoint ladder</div>

Titik Henti Umum

Tidak ada titik henti yang benar secara universal. Berikut kumpulan yang populer berdasarkan lebar perangkat yang umum:

480px — ponsel besar
768px — tablet
1024px — desktop kecil, tablet dalam orientasi lanskap
1280px — desktop standar
1536px — desktop besar

Titik Henti Berbasis Konten

Daripada menggunakan titik henti perangkat, praktik modern menetapkan titik henti saat konten mulai berantakan. Rancang pada satu ukuran, ubah ukurannya, lalu tambahkan titik henti saat tata letak mulai terlihat buruk.

Sintaksis Rentang (Modern)

CSS modern mendukung sintaksis rentang di dalam kueri media—lebih mudah dibaca daripada menggabungkan min dan max:

<div class="panel">Range syntax demo</div>

Menggabungkan dengan and

Gunakan and untuk mengharuskan beberapa kondisi terpenuhi secara bersamaan:

<div class="sidebar">Sidebar</div>

Peniadaan dengan not

Gunakan not untuk meniadakan kueri media. Kueri ini berlaku untuk semua hal yang TIDAK cocok dengan kueri tersebut:

<div class="doc">Not-screen demo (affects print/speech only)</div>

Beberapa Kueri dengan ,

Pisahkan beberapa kueri dengan koma—seperti daftar pemilih. Gaya diterapkan jika kueri APA PUN cocok.

<div class="page">
    Multiple queries with comma
    <div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
  </div>

Titik Henti Berbasis em

Menggunakan satuan em untuk titik henti, bukan px, membuat titik henti tersebut mengikuti preferensi ukuran fon peramban pengguna, sehingga meningkatkan aksesibilitas.

<div class="box">Em-based breakpoints</div>

Pemeriksaan Singkat

Kueri media mana yang cocok dengan layar yang lebarnya minimal 1024px?

Ringkasan

Kueri media menerapkan CSS secara kondisional berdasarkan karakteristik perangkat atau area pandang. Gunakan min-width untuk pendekatan yang mengutamakan perangkat seluler dan max-width untuk pendekatan yang mengutamakan desktop. Tetapkan titik henti sesuai kebutuhan konten, bukan berdasarkan ukuran perangkat yang arbitrer. Sintaksis rentang modern meningkatkan keterbacaan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Sintaks dan Titik Henti Umum” gratis?

Ya — teks lengkap “Sintaks dan Titik Henti Umum” 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 “Sintaks dan Titik Henti Umum”?

Pelajari sintaks media query dan titik henti standar yang digunakan dalam desain web modern. 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 1 dari 4.

Berapa lama pelajaran “Sintaks dan Titik Henti Umum” 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

← Kembali ke CSS Academy