響應式web設計之@media，響應web@media

響應式web設計之@media，響應web@media

兩種方式，一種是直接在link中判斷裝置的尺寸，然後引用不同的css檔案：

1	<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

意思是當螢幕的寬度大於等於400px的時候，應用styleA.css

在media屬性裡：

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＞標籤裡：

12345

@media screen and (max-width: 600px) { /*當螢幕尺寸小於600px時，應用下面的CSS樣式*/  .class {    background: #ccc;  }}

寫法是前面加@media，其它跟link裡的media屬性相同。
Max Width
下面的樣式會在可視地區的寬度小於 600px 的時候被應用。

123456

@media screen and (max-width: 600px) {  .class {    background: #fff;   你的樣式  }}

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

12345

@media screen and (min-width: 900px) {  .class {    background: #fff;  }}

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

 

12345

@media screen and (min-width: 600px) and (max-width: 900px) {  .class {    background: #fff;  }}