媒體查詢用法及常見媒體尺寸

一、媒體查詢用法

        @media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設備類型，並且所有的表達式的值都是true，那么該媒體查詢的結果為true.

　　(1)500px-800px之間的設備 @media screen and (min-width: 500px) and (max-width: 800px) { ... }

       (2)最小寬度500  @media screen and (min-width: 500px){... }

　　(3)在非打印設備下 @media not print and (max-width: 1200px)

二、常見媒體尺寸

見下圖

 

所以設置的常有：

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

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

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

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

在設置時，需要注意先后順序，不然后面的會覆蓋前面的樣式。