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)">

上面的意思是當屏幕的寬度大於等於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)">

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

另一種方式，即是直接寫在

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

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

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

要注意的是由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要，否則會出現橫向滾動條。