CSS @media aturan

Definisi dan penggunaan

@media aturan digunakan dalam media query untuk menerapkan gaya yang berbeda untuk media type/permintaan yang berbeda.

Media query dapat digunakan untuk memeriksa banyak hal, seperti:

  • Lebar dan tinggi viewport
  • Lebar dan tinggi perangkat
  • Orientasi (apakah ponsel atau tablet berada dalam mode landscape atau portrait?)
  • Resolusi

Penggunaan media query adalah teknologi populer untuk menyediakan gaya yang disesuaikan untuk desktop, laptop, tablet dan ponsel (desain halaman responsif).

Anda dapat menggunakan media query untuk menentukan gaya yang hanya berlaku untuk dokumen yang dicetak atau pengguna siaran suara (mediatype: print, screen atau speech).

Selain jenis media, ada juga karakteristik media. Karakteristik media menyediakan detil yang lebih spesifik untuk media query dengan memungkinkan tes khusus kepada karakteristik spesifik dari agen penggunaan media atau perangkat tampilan. Contohnya, Anda dapat menerapkan gaya hanya untuk layar yang lebar lebih besar atau lebih kecil dari tingkat spesifik.

Lihat juga:

Tutorial CSS:Query Media CSS

Tutorial CSS:Contoh media query CSS

Tutorial RWD:Melalui media query untuk merancang web responsif

Panduan referensi JavaScript:Metode window.matchMedia()

Contoh

Contoh 1

Jika lebar jendela browser adalah 600px atau lebih kecil, ganti warna latar belakang elemen <body> menjadi 'cerah biru':

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

cobalah sendiri

Anda dapat menemukan lebih banyak contoh TIY di bawah halaman.

Syarat CSS

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

Arti kata kunci not, only, dan and:

not: kata kunci not sebaliknya akan mengubah makna seluruh media query.

only: kata kunci only dapat mencegah browser versi lama mengaplikasikan gaya yang ditentukan, yang tidak mendukung media query dengan karakteristik media. Ini tidak mempengaruhi browser modern.

dan: kata kunci and akan menggabungkan karakteristik media dengan jenis media atau karakteristik media lainnya.

Mereka semua adalah opsional. Namun, jika menggunakan not atau only, maka jenis media harus disebutkan.

Anda juga dapat menggunakan stylesheet yang berbeda untuk media yang berbeda, seperti ini:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Jenis media

Nilai Deskripsi
all Bawaan. Digunakan untuk semua jenis perangkat media.
print Disebalik layar untuk printer.
screen Disebalik layar komputer, tablet, ponsel cerdas, dan lainnya.
speech Disebalik layar bacaan laman web untuk penutur layar.

Karakteristik media

Nilai Deskripsi
any-hover

Apakah ada mekanisme pengecek masukan yang tersedia yang mengijinkan pengguna (seperti mouse) untuk menempatkan kursor di atas elemen?

ditambahkan di Media Queries Level 4.
any-pointer

Apakah ada perangkat pengecek masukan yang tersedia, seperti pengecek pointer, jika ada, apakah kemesanannya seperti apa?

ditambahkan di Media Queries Level 4.
aspect-ratio Rasio tinggi lebar viewport (viewport).
color

Nilai bit per pixel perangkat output, yang biasa adalah 8, 16, 32 bit.

Nilai ini adalah 0 jika perangkat tidak mendukung output warna.
color-gamut

Dalam tingkat umum, domain warna yang didukung oleh agen pengguna dan perangkat output.

ditambahkan di Media Queries Level 4.
color-index

Jumlah entri tabel pencarian warna (color lookup table) perangkat output.

Nilai ini adalah 0 jika perangkat tidak menggunakan tabel pencarian warna.
device-aspect-ratio

Rasio lebar tinggi perangkat output.

Ditinggalkan di Media Queries Level 4.
device-height

Tinggi permukaan rendering perangkat output (seperti layar).

Ditinggalkan di Media Queries Level 4.
device-width

Lebar permukaan rendering perangkat output (seperti layar).

Ditinggalkan di Media Queries Level 4.
display-mode

Mode tampilan aplikasi, seperti yang ditentukan anggota display di manifest web app.

Didefinisikan di spec Web App Manifest.
forced-colors

Apakah peralatan agen pengguna menghalangi palet warna?

ditambahkan di Media Queries Level 5.
grid Apakah perangkat output menggunakan layar grid atau layar point-pixel?
height Tinggi viewport (viewport).
hover

Apakah mekanisme input utama mengizinkan pengguna menempatkan kursor mouse di atas elemen?

ditambahkan di Media Queries Level 4.
inverted-colors

Apakah browser atau sistem operasi dasar membalik warna?

ditambahkan di Media Queries Level 5.
light-level

Tingkat kecerahan lingkungan saat ini.

ditambahkan di Media Queries Level 5.
max-aspect-ratio Rasio tinggi lebar maksimal area tampilan.
max-color Ketebalan maksimal untuk setiap komponen warna perangkat output.
max-color-index Jumlah warna maksimal yang dapat ditampilkan oleh perangkat.
max-height Tinggi maksimal area tampilan, seperti jendela browser.
max-monochrome Ketebalan maksimal untuk setiap 'warna' di perangkat monokrom (grayscale).
max-resolution Resolusi maksimal perangkat, digunakan dpi atau dpcm.
max-width Lebar maksimal area tampilan, seperti jendela browser.
min-aspect-ratio Rasio tinggi lebar minimal area tampilan.
min-color Ketebalan minimal untuk setiap komponen warna perangkat output.
min-color-index Jumlah warna yang dapat ditampilkan oleh perangkat.
min-height Tinggi minimal area tampilan, seperti jendela browser.
min-monochrome Ketebalan minimal untuk setiap 'warna' di perangkat monokrom (grayscale).
min-resolution resolusi terendah peralatan, menggunakan dpi atau dpcm.
min-width lebar minimum area tampilan, seperti jendela browser.
monochrome

bit depth per pixel dalam frame buffer monokrom peralatan keluar.

jika peralatan bukan layar hitam putih, nilai ini adalah 0.
orientation arah putar viewport (mode potong atau mode tinggi).
overflow-block

bagaimana peralatan keluar menangani konten yang meluas di sumbu block viewport?

ditambahkan di Media Queries Level 4.
overflow-inline

apakah konten yang meluas di sumbu inline dapat digerakkan?

ditambahkan di Media Queries Level 4.
pointer

mekanisme input utama adalah peralatan penunjukkah? Jika ya, kinerja kecepatannya bagaimana?

ditambahkan di Media Queries Level 4.
prefers-color-scheme

deteksi apakah pengguna menyukai skema warna yang terang atau gelap.

ditambahkan di Media Queries Level 5.
prefers-contrast

deteksi apakah pengguna meminta meningkatkan atau menurunkan kontras warna yang sama.

ditambahkan di Media Queries Level 5.
prefers-reduced-motion

apakah pengguna ingin ada lebih sedikit efek gerakan di halaman.

ditambahkan di Media Queries Level 5.
prefers-reduced-transparency

apakah pengguna menyukai kecerahan yang lebih rendah.

ditambahkan di Media Queries Level 5.
resolution resolusi peralatan keluar, menggunakan dpi atau dpcm.
scan proses pemindai peralatan keluar (untuk TV dll.).
scripting

deteksi apakah scripting (contoh JavaScript) tersedia.

ditambahkan di Media Queries Level 5.
update

kecepatan pembaruan konten render peralatan keluar.

ditambahkan di Media Queries Level 4.
width lebar viewport (viewport).

lebih banyak contoh

contoh 2

Jika lebar browser adalah 600px atau kurang, sembunyikan elemen:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

cobalah sendiri

contoh 3

Jika lebar viewport adalah 800 piksel atau lebar, gunakan media query untuk menetapkan warna latar yang pucat; jika lebar viewport antara 400 hingga 799 piksel, gunakan media query untuk menetapkan warna latar yang kuning ke hijau terang. Jika viewport kurang dari 400 piksel, warna latar adalah biru terang:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

cobalah sendiri

contoh 4

Buat menu navigasi responsif (dilihat horisontal di layar besar, dan vertikal di layar kecil):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

cobalah sendiri

contoh 5

Gunakan media query untuk membuat tata letak kolom responsif:

/* Pada layar dengan lebar 992px atau kurang, empat kolom berubah menjadi dua kolom */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Pada layar dengan lebar kurang dari atau sama dengan 600 pixel, kolom berada di atap-tapak, bukannya di halaman paralel */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

cobalah sendiri

contoh 6

Gunakan media query untuk membuat situs responsif:

cobalah sendiri

contoh 7

Media query juga dapat digunakan untuk mengubah tata letak halaman berdasarkan orientasi browser. Anda dapat menulis sekumpulan properti CSS yang hanya berlaku saat lebar jendela browser lebih besar daripada tingginya (yaitu orientasi landscape).

Jika orientasi berada di mode landscape, gunakan warna latar belakang biru muda:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

cobalah sendiri

contoh 8

Gunakan media query untuk menetapkan warna teks menjadi hijau saat dokumen ditampilkan di layar, dan hitam saat dicetak:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

cobalah sendiri

contoh 9

daftar yang dipisahkan koma: gunakan koma untuk menambah media query lain ke dalam media query yang sudah ada (pernyataannya mirip dengan operator OR):

/* Saat lebar antara 600px dan 900px atau lebih besar daripada 1100px - ubah penampilan <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

cobalah sendiri

dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung @media aturan.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9