css媒體查詢 @media適配不一樣大小窗口

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。 https://blog.csdn.net/Lockey23/article/details/75452536

 

CSS3 @media是什麼，功能呢？

在響應式web設計中，CSS3 @media是一個入門級的技巧

CSS3 @media（也成爲CSS3媒體查詢）其做用就是容許添加表達式用以肯定媒體的環境狀況，以此來應用不一樣的樣式表。換句話說，其容許咱們在不改變內容的狀況下，改變頁面的佈局以精確適應不一樣的設備。

CSS3 @media的兩種工做方式：

一種是直接在link中判斷設備的尺寸，而後引用不一樣的css文件：

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

• 1

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

在media屬性裏：

screen 是媒體類型裏的一種，CSS2.1定義了10種媒體類型and 被稱爲關鍵字，其餘關鍵字還包括 not(排除某種設備)，only(限定某種設備)(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。完整的特性參看 相關的Media features部分

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

• 1

上邊的意思是當屏幕的寬度大於600小於800時，應用styleB.css

另外一種方式，便是直接寫在

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

• 1
• 2
• 3
• 4
• 5

寫法是前面加@media，其它跟link裏的media屬性相同

其實基本上就是樣式覆蓋~，判斷設備，而後引用不一樣的樣式文件覆蓋。

要注意的是因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。這一條很是重要，不然會出現橫向滾動條。