跳至主要内容

[CSS] Media Query

keywords: responsive, RWD​

Using Media Queries @ MDN > Web technology for developers

Media Queries Basic​

透過 @media 可以用來定義要套用的

  • 媒體類型（Media Type）：可用的類型包含 all (default), print, screen 和 speech。
  • 媒體特性（Media Feature）：常用的類型包含 width, height, aspect-ratio, orientation, resolution，這些類型常常需要給定一個區間，像是 min, max, min-width, max-width, min-aspect-ratio, max-aspect-ratio。
// 定義媒體類型
@media screen, print {
  /* Styles for screen and print devices */
}
// 同時定義媒體類型和媒體特性，中間需用 and 連接
@media screen and (max-width: 650px) {
  body {
    background: rebeccapurple;
  }
}

使用 or​

你可以透過 , 來定義許多的 queries 條件，**在這裡「逗號」就如同 or ** 一樣：

// 只要符合其中一種條件就會套用到
@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) {
  /* ... */
}

使用 not​

// not 會同時套用到 media types 和 media features

@media not screen and (hover: hover) {
  /* 當不能 hovers 時才會套用 */
}

其他設定​

FEATURE NAMEDEFINITIONHAS min- AND max- PREFIXES
width顯示區域的寬度V
height顯示區域的高度V
device-width裝置器的寬度V
device-height裝置器的高度V
orientation選擇直向（portrait）或橫向（landscape）@media screen and (orientation:portrait)
aspect-ratio顯示區域的長寬比V
device-aspect-ration裝置器的長寬比V
color裝置器每個色彩顯示的 bits 數，例如一個 8-bit color device 能夠使用(color:8)，沒有色彩的裝置則使用 0。V
color-indexThe number of entries in the color lookup table of the output deviceV
monochromeSimilar to color, the monochrome feature lets us test the number of bits per pixel in a monochrome device.V
resolutionTests the density of the pixels in the device, such as screen and(resolution: 72dpi) or screen and (max-resolition:300dpi)V

載入不同的 CSS 檔​

<link rel="stylesheet" type="text/css" href="all.css" media="screen" />
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)" />
<link
  rel="stylesheet"
  type="text/css"
  href="b.css"
  media="screen and (min-width: 768px) and (max-width: 979px)"
/>
<link rel="stylesheet" type="text/css" href="c.css" media="screen and (min-width: 1200px)" />
<link rel="stylesheet" type="text/css" href="d.css" media="screen and (max-device-width: 480px)" />

實用範例​

瀏覽器尺寸​

@media screen and (min-width: 1024px) {
  /*STYLES*/
}

@media screen and (min-width: 1200px) {
  // 如果使用者之視窗寬度 >= 1200px，將會再載入這裡的 CSS。
}

@media screen and (min-width: 768px) and (max-width: 979px) {
  // 如果使用者之視窗寬度介於 768px ~ 979px，將會再載入這裡的 CSS。
}

@media screen and (max-width: 767px) {
  // 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。
}

@media screen and (max-device-width: 480px) {
  // 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。
}

瀏覽器直立或橫放​

@media screen and (orientation: portrait) {
  // 直立時套用
}

@media screen and (orientation: landscape) {
  // 橫放時套用
}

retina 顯示器​

我們可以透過 min-resolution: 192dpi 和 -webkit-min-device-pixel-ratio: 2 來定義 retina 顯示器：

// 120dpi - 720px,
// 192dpi - 1200px
@media screen and (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2) {
  /* ... */
}

@media screen and (min-resolution: 120dpi) and (min-width: 720px) {
  // ...
}

Retina Display Media Query @ CSS Tricks

印表機​

@media print {
  /* styles for print media only */
}

參考​