當頁面小於960px的時候執行
@media screen and (max-width: 960px){
body{
background: #000;
}
}
等於960px尺寸的代碼
@media screen and (max-device-width:960px){
body{
background:red;
}
}
尺寸大於960px時候執行
@media screen and (min-width:960px){
body{
background:orange;
}
}
混合使用
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}
Media所有參數匯總
以上就是我們最常需要用到的媒體查詢器的三個特性，大於，等於，小於的寫法。媒體查詢器的全部功能肯定不止這三個功能，下面是我總結的它的一些參數用法解釋：
-
width:瀏覽器可視寬度。
-
height:瀏覽器可視高度。
-
device-width:設備屏幕的寬度。
-
device-height:設備屏幕的高度。
-
orientation:檢測設備目前處於橫向還是縱向狀態。
-
aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)
-
device-aspect-ratio:檢測設備的寬度和高度的比例。
-
color:檢測顏色的位數。（例如：min-color:32就會檢測設備是否擁有32位顏色）
-
color-index:檢查設備顏色索引表中的顏色，他的值不能是負數。
-
monochrome:檢測單色楨緩沖區域中的每個像素的位數。（這個太高級，估計咱很少會用的到）
-
resolution:檢測屏幕或打印機的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
-
grid：檢測輸出的設備是網格的還是位圖設備。
屏幕適配注意書寫順序，下面即為正確的順序
1.按照min-width的順序書寫
@media (min-width: 1200){ //>=1200的設備 }
@media (min-width: 992px){ //>=992的設備 }
@media (min-width: 768px){ //>=768的設備 }
2.按照max-width的順序書寫
@media (max-width: 1199){ //<=1199的設備 }
@media (max-width: 991px){ //<=991的設備 }
@media (max-width: 767px){ //<=768的設備 }