CSS @media rule

Paglilinaw at paggamit

Ang @media rule sa media query ay ginagamit upang ilapat ang iba't ibang estilo para sa iba't ibang uri ng media / aparato.

Ang media query ay maaaring gamitin upang suriin maraming bagay, tulad ng:

  • Ang lapad at taas ng viewport
  • Ang lapad at taas ng aparato
  • Direksyon (ang handphone o tablet ay nasa landscape o portrait mode?).
  • Resolusyon

Ang paggamit ng media query ay isang sikat na teknolohiya na ginagamit upang magbigay ng personalisadong stylesheet sa desktop, laptop, tablet at mobile phone (responsive web design).

Maaari ka gamitin ang media query upang tugisin ang mga estilo na magiging kasama lamang sa mga dokumento na inilimbag o sa screen reader (mediatype: print, screen o speech).

Hindi lamang ang media type, mayroon din ang media feature. Ang media feature ay nagbibigay ng mas tiyak na detalye sa media query sa pamamagitan ng pagpapatest ng espesipikong katangian ng user agent o display device. Halimbawa, maaari mong ilagay ang estilo lamang sa screen na mas malaki o mas maliit kaysa sa tiyak na lapad.

Para sa iba pang pagkakatuturo:

CSS Tutorial:CSS 媒体查询

CSS Tutorial:Sample ng CSS Media Query

RWD Tutorial:Ginagamit ang media query para sa responsive web design

JavaScript Reference Manual:Method window.matchMedia()

Sample

Halimbawa 1

Kung ang lapad ng window ng browser ay 600px o mas maliit, baguhin ang kulay ng background ng <body> element sa 'light blue':

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

亲自试一试

Maaari mong mahanap ang mas maraming TIY sample sa ibaba ng pahina.

CSS Syntax

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

Kahulugan ng not, only at and keyword: CSS-Code;

not: Ang not keyword ay inilalabas ang kahulugan ng buong media query.

only: Ang only keyword ay nagbibigay-bawas sa aplikasyon ng estilong tinukoy ng lumang browser, na hindi sumusuporta sa media query na may media feature. Hindi ito makakaapekto sa modernong browser.

and: Ang and keyword ay pinagsasama ang media feature sa media type o iba pang media feature.

Sinasabing opsyonal sila. Gayunpaman, kung ginagamit ang not o only, dapat din ipaabot ang uri ng media.

Maaari ka ring gumamit ng iba't ibang stylesheet para sa iba't ibang media, tulad ng ganito:

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

Media Type

Halaga Paglalarawan
all Default. Ginagamit para sa lahat ng uri ng media device.
print Ginagamit para sa printer.
screen Ginagamit para sa computer screen, tablet, smartphone at iba pa.
speech Ginagamit para sa screen reader na binabasa ang pahina.

Media Feature

Halaga Paglalarawan
any-hover

Mayroon bang alin pang input mechanism na nagpapahintulot sa user (gumamit ng mouse at iba pa) na mag悬浮 sa elemento?

Idinagdag sa Media Queries Level 4.
any-pointer

Ang mayroon bang alin pang input mechanism na may pointer device, kung mayroon, anong kagamitan ang kanyang akurasya?

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

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

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

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

Idinagdag sa 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

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

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

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

Idinagdag sa Media Queries Level 4.
inverted-colors

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

Idinagdag sa Media Queries Level 5.
light-level

当前环境光水平。

Idinagdag sa 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 Pinakamababang resolusyon ng device, gamit ang dpi o dpcm.
min-width Pinakamaliit na lapad ng lugar ng pagdisplay, halimbawa ang bintana ng brauser.
monochrome

Bite-depth ng bawat pixel sa monochrome frame buffer ng output device.

Kung ang device ay hindi puti at puti na ekran, ang halaga nito ay 0.
orientation Ang paraan ng pag-ayon ng viewport (landscape o portrait mode).
overflow-block

Paano paghawak ng output device ang nililigaw na nilalaman sa blok axis na lilipat sa viewport (viewport)?

Idinagdag sa Media Queries Level 4.
overflow-inline

Ang nilililipat ang nililigaw na nilalaman sa linya ng inline kung maari itong mag-scrol na ba?

Idinagdag sa Media Queries Level 4.
pointer

Ang pangunahing mekanismo ng pagsisimula ay isang pointer device ba? Kung ganito, anong katumpakan nito?

Idinagdag sa Media Queries Level 4.
prefers-color-scheme

Detekta kung ang user ay nakikipagpili sa liwanag o matingkad na patakaran ng kulay?

Idinagdag sa Media Queries Level 5.
prefers-contrast

Detekta kung ang user ay nais na madagdagan o mabawasan ang kontraste sa pagitan ng malapit na kulay?

Idinagdag sa Media Queries Level 5.
prefers-reduced-motion

Gusto ba ng user na mayroong mas kaunting dinamikong epekto sa pahina?

Idinagdag sa Media Queries Level 5.
prefers-reduced-transparency

Ang gusto ba ng user na piliin ang mas mababang kawalang-kaliwang kulay?

Idinagdag sa Media Queries Level 5.
resolution Resolusyon ng output device, gamit ang dpi o dpcm.
scan Proseso ng pag-scan ng output device (aplicable sa TV at iba pa).
scripting

Detekta kung ang scripting (halimbawa, JavaScript) ay magagamit.

Idinagdag sa Media Queries Level 5.
update

Kalagayan ng pagpapatuloy ng pagrender ng pinagkukunan ng output device.

Idinagdag sa Media Queries Level 4.
width Lapad ng viewport (viewport).

Higit pang mga halimbawa

Eli 2

Kung ang lapad ng brauser ay 600px o mas maliit, itago ang elemento:

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

亲自试一试

Eli 3

Kung ang lapad ng viewport ay 800 pixel o mas malaki, gamitin ang media query upang itakda ang kulay ng lakas bilang lilang purpura; kung ang lapad ng viewport ay nasa 400 hanggang 799 pixel, gamitin ang media query upang itakda ang kulay ng lakas bilang liwanag berde. Kung ang viewport ay mas maliit sa 400 pixel, ang kulay ng lakas ay liwanag asul:

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

亲自试一试

Eli 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