Style

Media Queries簡述

Html 的完整列表是

Media Queries 簡述
Media Queries
all - 所有的裝置
aural - 聽覺裝置
braille - 盲文點字機
handheld - 手持裝置
print -印表機輸出設備
projection - 投影輸出設備
screen - 電腦螢幕
tty - 聽障人士使用的 Teletype 機器
tv - 電視

Html 網頁上常用的為 all 、 screen 、 print

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*如果螢幕寬度為 400px 以上 且 700px 以下，就套用 css 設定*/
@media screen and(min-width: 400px) and (max-width: 700px) {
    ...
}
/*如果是彩色螢幕 或 彩色投影機設備，就套用 css 設定 */
@media screen and (color), projection and (color) { 
  ...
}

/*如果螢幕寬度為 768px 以下，就套用 css 設定*/
@media screen and (max-width:768px) { 
  ...
}

/*如果是彩色螢幕不套用 css 設定，印表機才套用*/
@media not screen and (color), print and (color) { 
  ...
}

max-width，表示這個數字以下（包含） 的都適用。(<=)
min-width，表示這個數字以上（包含） 的都適用。(>=)

ＲＷＤ

1
2
3
4
5
6
7
@media (min-width: 576px) { ... }

@media (min-width: 768px) { ... }

@media (min-width: 992px) { ... }

@media (min-width: 1200px) { ... }
1
2
3
4
5
6
7
8
9
@media (max-width: 575.99px) { ... }

@media (min-width: 576px) and (max-width: 767.99px) { ... }

@media (min-width: 768px) and (max-width: 991.99px) { ... }

@media (min-width: 992px) and (max-width: 1199.99px) { ... }

@media (min-width: 1200px) { ... }