響應式web設計之 media

2021-09-26 21:50:20 字數 2333 閱讀 2888

兩種方式,一種是直接在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)

}

寫法是前面加@media,其它跟link裡的media屬性相同。

max width

下面的樣式會在可視區域的寬度小於 600px 的時候被應用。

1

2

3

4

5

6

@media screen and (max-width: 600px)

}

min width

下面的樣式會在可視區域的寬度大於 900px 的時候被應用。

1

2

3

4

5

@media screen and (min-width: 900px)

}

multiple media queries

你還可以使用過個匹配條件,下面的樣式會在可視區域的寬度在 600px 和 900px 之間的時候被應用。

1

2

3

4

5

@media screen and (min-width: 600px) and (max-width: 900px)

}

**:

響應式web設計之 media

兩種方式,一種是直接在link中判斷裝置的尺寸,然後引用不同的css檔案 1 linkrel stylesheet type text css href stylea.css media screen and min width 400px 意思是當螢幕的寬度大於等於400px的時候,應用style...

響應式web設計

initial scale 1.0 script 不使用width px 只使用百分比寬度width xx 或者width auto 字型也不能使用絕對大小 px 而只能使用相對大小 em 如 font normal 100 helvetica,arial,sans serif 字型大小是頁面預設大...

響應式web設計

響應式網頁設計是時下網頁設計領域最熱門的話題之一,該概念由著名網頁設計師 ethan marcotte 在2010年5月份提出,其目標是要讓設計的 能夠響應使用者的行為,根據不同終端裝置自動調整尺寸。簡而言之,就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。那麼,怎麼實現響應式設計呢?...