Kueri Media CSS

CSS2 memperkenalkan jenis media

CSS2 memperkenalkan @media Aturan yang memungkinkan untuk mendefinisikan aturan gaya yang berbeda untuk jenis media yang berbeda.

Contoh: Anda mungkin memiliki sekelompok aturan gaya untuk layar komputer, sekelompok aturan untuk printer, sekelompok aturan untuk perangkat tangki, bahkan ada sekelompok aturan untuk TV, dan lain-lain.

Sayangnya, kecuali untuk tipe media print, tipe media ini tidak pernah mendapatkan dukungan skala besar dari perangkat.

CSS3 memperkenalkan media query

Media query di CSS3 meluas konsep tipe media di CSS2: mereka tidak mencari tipe perangkat, tetapi fokus pada kemampuan perangkat.

Media query dapat digunakan untuk memeriksa banyak hal, seperti:

  • Lebar dan tinggi viewport
  • Lebar dan tinggi perangkat
  • Arah (tablet/ponsel berada dalam mode horizontal atau vertical)
  • Resolusi

Menggunakan media query adalah teknologi populer yang dapat menyediakan stylesheet yang disesuaikan untuk desktop, laptop, tablet dan ponsel (seperti iPhone dan ponsel Android).

Dukungan browser

Angka di tabel menandai dukungan penuh @media versi browser pertama untuk aturan yang relevan.

Atribut
@media 21.0 9.0 3.5 4.0 9.0

Sintaks media query

Media query terdiri dari satu tipe media dan dapat mengandung satu atau lebih ekspresi yang dapat diurai menjadi benar atau salah.

@media not|only mediatype and (ekspresi) {
  Kode CSS;
}

Jika tipe media yang ditentukan cocok dengan tipe perangkat yang menampilkan dokumen dan semua ekspresi dalam media query benar, hasil query adalah benar. Saat media query adalah benar, stylesheet atau aturan gaya yang relevan akan diterapkan dan diikuti aturan kascapan normal.

Kecuali Anda menggunakan operator not atau only, tipe media adalah opsional dan implisit all Tipe.

Anda juga dapat menggunakan stylesheet yang berbeda untuk media yang berbeda:

<link rel="stylesheet" media="mediatype and|not|only (ekspresi)" href="print.css">

Tipe Media CSS3

Nilai Deskripsi
all Untuk semua jenis perangkat media.
print Untuk printer.
screen Untuk layar komputer, tablet, ponsel dan sebagainya.
speech Untuk pemirsa layar baca laman dengan suara tinggi

Contoh sederhana media query

Salah satu cara menggunakan media query adalah untuk memiliki bagian CSS alternatif di dalam stylesheet.

Contoh di bawah ini akan mengubah warna latar belakang menjadi biru muda jika lebar viewport adalah 480 piksel atau lebar (jika lebar viewport kurang dari 480 piksel, warna latar belakang akan menjadi merah muda):

实例

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Coba Sendiri

Contoh ini menunjukkan sebuah menu, jika lebar viewport adalah 480 piksel atau lebar, menu ini akan mengambang ke kiri halaman (jika lebar viewport kurang dari 480 piksel, menu akan berada di atas konten):

实例

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

Coba Sendiri

Banyak Contoh Media Query

Untuk contoh media query lainnya, kunjungi halaman berikutnya:Contoh MQ CSS.

Panduan Referensi @media CSS

Lengkapnya tentang semua jenis media dan fitur/ekspresi, lihat di Aturan @media dalam Referensi CSS.