CSS @media aturan

Definisi dan penggunaan

@media aturan digunakan dalam pemeriksaan media untuk melaksanakan gaya yang berbeza untuk jenis media/permataan berbeza.

Pemeriksaan media boleh digunakan untuk memeriksa banyak hal, seperti:

  • Lebar dan tinggi viewport
  • Lebar dan tinggi peranti
  • Arah (apakah ponsel atau tablet berada dalam mode tinggi atau lebar?)
  • Resolusi

Penggunaan pemeriksaan media adalah teknologi yang popular untuk menyediakan gaya yang disesuaikan untuk desktop, komputer ribut, tablet dan ponsel (reka bentuk laman web yang responsif).

Anda boleh guna pemeriksaan media untuk tentukan beberapa gaya hanya untuk dokumen cetak atau pengguna penceritaan layar (mediatype: cetak, skrin atau bicara).

Selain jenis media, terdapat juga karakteristik media. Karakteristik media memberikan lebih banyak perincian khusus untuk kawalan media melalui membenarkan pengujian khas untuk kawalan penggunaan atau peranti paparan. Contohnya, anda boleh hanya mengaplikasikan gaya kepada skrin yang lebih besar atau lebih kecil daripada lebar tertentu.

Lihat juga:

Panduan CSS:Pencarian Media CSS

Panduan CSS:Contoh kawalan media CSS

Panduan RWD:Melalui kawalan media untuk perekaan Web responsif

Panduan JavaScript:Metode window.matchMedia()

Contoh

Contoh 1

Jika lebar tingkap perekaan browser adalah 600px atau lebih kecil, tingkat warna latar belakang elemen <body> diubah kepada 'biru halus':

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

亲自试一试

Lebih banyak contoh TIY dapat ditemui di bawah halaman.

Bentuk Bahasa CSS

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

Makna kata kunci not, only dan and:

not: Katakunci not akan kebalikan makna kawalan media keseluruhan.

only: Katakunci only boleh mencegah perekaan lama untuk mengaplikasikan gaya yang ditentukan, yang tidak mendukung kawalan media dengan karakteristik media. Ia tidak mempengaruhi perekaan moden.

and: Katakunci and akan menggabungkan karakteristik media dengan jenis media atau karakteristik media lain.

Mereka adalah pilihan. Tetapi, jika digunakan not atau only, jenis media juga perlu ditentukan.

Anda boleh menggunakan gaya berbeza untuk media yang berbeza, 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 Penerangan
all Lalai. Dipergunakan untuk semua jenis peranti media.
print Dipergunakan untuk printer.
screen Dipergunakan untuk skrin komputer, tablet, smartphone dan sebagainya.
speech Dipergunakan untuk perekaan bacaan layar halaman.

Karakteristik media

Nilai Penerangan
any-hover

Adakah ada mana-mana mekanisme input yang membenarkan pengguna (seperti mouse) untuk menempatkan di atas elemen?

Ditambahkan di Media Queries Level 4.
any-pointer

Adakah ada mana-mana peralatan pengecaman dalam mekanisme input yang tersedia, jika ada, apakah keutamaannya seperti mana?

Ditambahkan di Media Queries Level 4.
aspect-ratio 视口（viewport）的宽高比。
color

输出设备每个像素的比特值，常见的有 8、16、32 位。

如果设备不支持输出彩色，则该值为 0。
color-gamut

用户代理和输出设备大致程度上支持的色域。

Ditambahkan di Media Queries Level 4.
color-index

输出设备的颜色查询表（color lookup table）中的条目数量。

如果设备不使用颜色查询表，则该值为 0。
device-aspect-ratio

输出设备的宽高比。

已在 Media Queries Level 4 中被弃用。
device-height

输出设备渲染表面（如屏幕）的高度。

已在 Media Queries Level 4 中被弃用。
device-width

输出设备渲染表面（如屏幕）的宽度。

已在 Media Queries Level 4 中被弃用。
display-mode

应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定

在 Web App Manifest spec 被定义。
forced-colors

检测是用户代理否限制调色板。

Ditambahkan di Media Queries Level 5.
grid 输出设备使用网格屏幕还是点阵屏幕？
height 视口（viewport）的高度。
hover

主输入机制是否允许用户将鼠标悬停在元素上？

Ditambahkan di Media Queries Level 4.
inverted-colors

浏览器或者底层操作系统是否反转了颜色。

Ditambahkan di Media Queries Level 5.
light-level

当前环境光水平。

Ditambahkan di Media Queries Level 5.
max-aspect-ratio 显示区域的宽度和高度之间的最大比例。
max-color 输出设备每个颜色分量的最大位数。
max-color-index 设备可以显示的最大颜色数。
max-height 显示区域的最大高度，例如浏览器窗口。
max-monochrome 单色（灰度）设备上每种“颜色”的最大位数。
max-resolution 设备的最大分辨率，使用 dpi 或 dpcm。
max-width 显示区域的最大宽度，例如浏览器窗口。
min-aspect-ratio 显示区域的宽度和高度之间的最小比例。
min-color 输出设备每个颜色分量的最小位数。
min-color-index 设备可以显示的最小颜色数。
min-height 显示区域的最小高度，例如浏览器窗口。
min-monochrome 单色（灰度）设备上每种“颜色”的最小位数。
min-resolution Resolusi terendah peralatan, menggunakan dpi atau dpcm.
min-width Lebar minimum area tampilan, contohnya jendela browser.
monochrome

Bit depth per pixel dalam frame buffer tunggal peralatan keluar.

Jika peralatan bukan layar hitam-putih, nilai ini adalah 0.
orientation Arah putar tetingkap (mode landscape atau portrait).
overflow-block

Bagaimana peralatan keluar menangani konten yang meluas ke dalam sumbu block (viewport)?

Ditambahkan di Media Queries Level 4.
overflow-inline

Apakah konten yang meluas ke dalam sumbu inline dapat digerakkan?

Ditambahkan di Media Queries Level 4.
pointer

mekanisme input utama adalah peralatan penunjuk? Jika ya, keutamaannya seperti mana?

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

Deteksi apakah pengguna mendahului skema warna yang cerah atau gelap.

Ditambahkan di Media Queries Level 5.
prefers-contrast

Deteksi apakah pengguna meminta untuk meningkatkan atau menurunkan kontras warna yang sama.

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

Apakah pengguna ingin terlihat lebih sedikit efek gerakan di halaman.

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

Apakah pengguna mendahului transparensi yang lebih rendah?

Ditambahkan di Media Queries Level 5.
resolution Resolusi peralatan keluar, menggunakan dpi atau dpcm.
scan Proses pemantauan peralatan keluar (terapkan untuk TV dll.).
scripting

Deteksi apakah scripting (contohnya JavaScript) tersedia.

Ditambahkan di Media Queries Level 5.
update

Frekuensi pembaruan konten perecapan peralatan keluar.

Ditambahkan di Media Queries Level 4.
width Lebar tetingkap (viewport).

Beberapa contoh lain

contoh 2

Jika lebar browser 600px atau kurang, sembunyikan elemen:

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

亲自试一试

contoh 3

Jika lebar layar 800 piksel atau lebar, gunakan media query untuk menetapkan warna latar belakang menjadi lilin; jika lebar layar antara 400 hingga 799 piksel, gunakan media query untuk menetapkan warna latar belakang menjadi hijau muda. Jika lebar layar kurang 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 4

创建一个响应式导航菜单（在大屏幕上水平显示，在小屏幕上垂直显示）：

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

亲自试一试

例子 5

使用媒体查询来创建响应式列布局：

/* 在 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* 在宽度小于或等于 600 像素的屏幕上，使各列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

亲自试一试

例子 6

使用媒体查询来创建响应式网站：

亲自试一试

例子 7

媒体查询还可以用于根据浏览器的方向更改页面的布局。您可以写一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度（即“横屏”方向）时才适用。

如果方向处于横屏模式，则使用浅蓝色背景色：

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

亲自试一试

例子 8

使用媒体查询将文本颜色设置为在屏幕上显示文档时为绿色，在打印时为黑色：

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

亲自试一试

例子 9

逗号分隔的列表：使用逗号将另一个媒体查询添加到已存在的媒体查询中（它的行为类似 OR 运算符）：

/* 当宽度介于 600px 和 900px 之间或大于 1100px 时 - 改变 <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;
  }
}

亲自试一试

浏览器支持

表格中的数字注明了完全支持 @media 规则的首个浏览器版本。

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