兩種方式，一種是直接在link中判斷設備的尺寸，然后引用不同的css文件：
|
1
|
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"styleA.css"
media
=
"screen and (min-width: 400px)"
>
|
意思是當屏幕的寬度大於等於400px的時候，應用styleA.css
在media屬性里：
-
screen 是媒體類型里的一種，CSS2.1定義了10種媒體類型
-
and 被稱為關鍵字，其他關鍵字還包括 not(排除某種設備)，only(限定某種設備)
-
(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。
|
1
|
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"styleB.css"
media
=
"screen and (min-width: 600px) and (max-width: 800px)"
>
|
意思是當屏幕的寬度大於600小於800時，應用styleB.css
另一種方式，即是直接寫在＜style＞標簽里：
|
1
2
3
4
5
|
@media screen and (max-width: 600px) { /*當屏幕尺寸小於600px時，應用下面的CSS樣式*/
.class {
background: #ccc;
}
}
|
寫法是前面加@media，其它跟link里的media屬性相同。
Max Width
下面的樣式會在可視區域的寬度小於 600px 的時候被應用。
|
1
2
3
4
5
6
|
@media screen and (max-width: 600px) {
.class {
background: #fff;
你的樣式
}
}
|
Min Width
下面的樣式會在可視區域的寬度大於 900px 的時候被應用。
|
1
2
3
4
5
|
@media screen and (min-width: 900px) {
.class {
background: #fff;
}
}
|
Multiple Media Queries
你還可以使用過個匹配條件，下面的樣式會在可視區域的寬度在 600px 和 900px 之間的時候被應用。
|
1
2
3
4
5
|
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #fff;
}
}
|