PJCHENder 未整理筆記

[CSS] Media Query

2018-06-09

[CSS] Media Query

@(CSS)[RWD]

keywords: responsive, RWD

Using Media Queries @ MDN > Web technology for developers

Media Queries Basic

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

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

使用 or

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

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

使用 not

1
2
3
4
5
// not 會同時套用到 media types 和 media features

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

其他設定

FEATURE NAME DEFINITION HAS 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-index The number of entries in the color lookup table of the output device V
monochrome Similar to color, the monochrome feature lets us test the number of bits per pixel in a monochrome device. V
resolution Tests the density of the pixels in the device, such as screen and(resolution: 72dpi) or screen and (max-resolition:300dpi) V

載入不同的 CSS 檔

1
2
3
4
5
<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)">

實用範例

瀏覽器尺寸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@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。
}

瀏覽器直立或橫放

1
2
3
4
5
6
7
@media screen and (orientation:portrait){
// 直立時套用
}

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

retina 顯示器

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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

印表機

1
2
3
@media print {
/* styles for print media only */
}

參考

Tags: RWD

掃描二維條碼,分享此文章