CSS @media Aturan
Contoh
Ubah warna latar belakang elemen <body> menjadi "biru muda" saat jendela browser lebarnya 600 piksel atau kurang:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Aturan @media
digunakan dalam kueri media untuk menerapkan gaya yang berbeda untuk jenis/perangkat media yang berbeda.
Media query dapat digunakan untuk memeriksa banyak hal, seperti:
- lebar dan tinggi viewport
- lebar dan tinggi perangkat
- orientasi (apakah tablet/ponsel dalam mode lanskap atau potret?)
- resolusi
Menggunakan kueri media adalah teknik populer untuk mengirimkan lembar gaya yang disesuaikan (desain web responsif) ke desktop, laptop, tablet, dan ponsel.
Anda juga bisa menggunakan kueri media untuk menentukan bahwa gaya tertentu hanya untuk dokumen yang dicetak atau untuk pembaca layar (jenis media: cetak, layar, atau ucapan).
Selain jenis media, terdapat juga fitur media. Fitur media memberikan detail yang lebih spesifik untuk kueri media, dengan mengizinkan pengujian fitur tertentu dari agen pengguna atau perangkat tampilan. Misalnya, Anda dapat menerapkan gaya hanya ke layar yang lebih besar, atau lebih kecil, dari lebar tertentu.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung aturan @media.
Property | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
Sintaks CSS
@media not|only mediatype and (mediafeature and|or|not
mediafeature) {
CSS-Code;
}
arti dari not , only and and dan kata kunci :
not: Kata kunci not membalikkan arti dari keseluruhan kueri media.
only: Satu-satunya kata kunci mencegah browser lama yang tidak mendukung kueri media dengan fitur media menerapkan gaya yang ditentukan. Ini tidak berpengaruh pada browser modern.
dan: Kata kunci and menggabungkan fitur media dengan jenis media atau fitur media lainnya.
Mereka semua opsional. Namun, jika Anda menggunakan not atau only , Anda juga harus menentukan jenis media.
Anda juga dapat memiliki 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
Value | Description |
---|---|
all | Default. Used for all media type devices |
Used for printers | |
screen | Used for computer screens, tablets, smart-phones etc. |
speech | Used for screenreaders that "reads" the page out loud |
Fitur Media
Value | Description |
---|---|
any-hover | Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
any-pointer | Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
aspect-ratio | The ratio between the width and the height of the viewport |
color | The number of bits per color component for the output device |
color-gamut | The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4) |
color-index | The number of colors the device can display |
grid | Whether the device is a grid or bitmap |
height | The viewport height |
hover | Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4) |
inverted-colors | Is the browser or underlying OS inverting colors? (added in Media Queries Level 4) |
light-level | Current ambient light level (added in Media Queries Level 4) |
max-aspect-ratio | The maximum ratio between the width and the height of the display area |
max-color | The maximum number of bits per color component for the output device |
max-color-index | The maximum number of colors the device can display |
max-height | The maximum height of the display area, such as a browser window |
max-monochrome | The maximum number of bits per "color" on a monochrome (greyscale) device |
max-resolution | The maximum resolution of the device, using dpi or dpcm |
max-width | The maximum width of the display area, such as a browser window |
min-aspect-ratio | The minimum ratio between the width and the height of the display area |
min-color | The minimum number of bits per color component for the output device |
min-color-index | The minimum number of colors the device can display |
min-height | The minimum height of the display area, such as a browser window |
min-monochrome | The minimum number of bits per "color" on a monochrome (greyscale) device |
min-resolution | The minimum resolution of the device, using dpi or dpcm |
min-width | The minimum width of the display area, such as a browser window |
monochrome | The number of bits per "color" on a monochrome (greyscale) device |
orientation | The orientation of the viewport (landscape or portrait mode) |
overflow-block | How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4) |
overflow-inline | Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4) |
pointer | Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4) |
resolution | The resolution of the output device, using dpi or dpcm |
scan | The scanning process of the output device |
scripting | Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4) |
update | How quickly can the output device modify the appearance of the content (added in Media Queries Level 4) |
width | The viewport width |
Lebih Banyak Contoh
Contoh
Sembunyikan elemen saat lebar browser 600 piksel atau kurang:
@media screen and (max-width: 600px) {
div.example {
display:
none;
}
}
Contoh
Gunakan kueri media untuk menyetel warna latar belakang ke lavender jika area pandang memiliki lebar 800 piksel atau lebih lebar, menjadi hijau muda jika area pandang lebar antara 400 dan 799 piksel. Jika area pandang lebih kecil dari 400 piksel, warna latar belakang adalah biru muda:
body {
background-color: lightblue;
}
@media screen and (min-width:
400px) {
body {
background-color: lightgreen;
}
}
@media
screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
Contoh
Buat menu navigasi responsif (ditampilkan secara horizontal di layar besar dan vertikal di layar kecil):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Contoh
Gunakan kueri media untuk membuat tata letak kolom responsif:
/* On screens that are 992px wide or less, go from four columns to two
columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack
on top of each other instead of next to each other */
@media screen and (max-width:
600px) {
.column {
width: 100%;
}
}
Contoh
Gunakan kueri media untuk membuat situs web responsif:
Contoh
Kueri media juga dapat digunakan untuk mengubah tata letak halaman tergantung pada orientasi browser. Anda dapat memiliki satu set properti CSS yang hanya akan diterapkan ketika jendela browser lebih lebar dari tingginya, yang disebut orientasi "Lanskap".
Gunakan warna latar belakang biru muda jika orientasinya dalam mode lanskap:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Contoh
Gunakan kueri media untuk mengatur warna teks menjadi hijau saat dokumen ditampilkan di layar, dan menjadi hitam saat dicetak:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
Contoh
Daftar yang dipisahkan koma : tambahkan kueri media tambahan ke kueri yang sudah ada, menggunakan koma (ini akan berperilaku seperti operator ATAU):
/* When the width is between 600px and 900px OR above 1100px - change the
appearance of <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;
}
}
Halaman Terkait
Tutorial CSS: Kueri Media CSS
Tutorial CSS: Contoh Kueri Media CSS
Tutorial RWD: Desain Web Responsif dengan Kueri Media
Tutorial JavaScript: Metode window.matchMedia()