CSS3 @media查詢 設置斷點 實現響應式頁面

使用@media可以針對不同的屏幕尺寸設置不同的樣式，實現響應式頁面開發。

同樣，重置瀏覽器大小時，會重新渲染頁面。

這裏做一個簡單的總結，如下爲參考鏈接：http://www.runoob.com/cssref/css3-pr-mediaquery.html

兩種使用方式：

第一種：style中設置

@media mediatype（媒體類型） and|not|only (media feature) {
    CSS-Code;    //CSS代碼塊
}

媒體類型主要包括：

all 所有類型設備

screen 用於電腦、平板、手機屏幕

speech  用於閱讀器發生設備

print 用於打印預覽

示例：以屏幕寬度1366px區分

@media screen and (max-width:1365px){
   /* 當屏幕寬度小於1366px時，適配的CSS代碼塊*/
}
@media screen and (min-width:1366px){
   /* 當屏幕寬度大於等於1366px時，適配的CSS代碼塊*/
}

and/not/only的用法解析：

not：排除某些特定設備

only：指定特定的媒體類型 

          移動設備支持Media Queries的，會讀取only的樣式文件；

          不支持的遇到only就會忽略這個樣式文件。

分辨率由小向大寫，因爲CSS是從前向後加載，符合條件的情況下，後面的樣式文件會覆蓋掉前面的樣式文件。

@media (max-width: 767px) {
   // col-xs
}

@media (min-width: 768px) and (max-width: 991px) {
   // col-sm
}

@media (min-width: 992px) and (max-width: 1199px) {
   // col-md
}

@media (min-width: 1200px) {
   // col-lg
}

第二種：在引用時設置斷點

根據不同的條件，引用不同的樣式文件，使之生效。

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">