兩種方式,一種是直接在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>標籤裡:12
345@media screen and (max-width: 600px)
}
寫法是前面加@media,其它跟link裡的media屬性相同。
max width
下面的樣式會在可視區域的寬度小於 600px 的時候被應用。12
3456
@media screen and (max-width: 600px)
}
min width
下面的樣式會在可視區域的寬度大於 900px 的時候被應用。12
345@media screen and (min-width: 900px)
}
multiple media queries
你還可以使用過個匹配條件,下面的樣式會在可視區域的寬度在 600px 和 900px 之間的時候被應用。12
345@media screen and (min-width: 600px) and (max-width: 900px)
}
**: