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

注意下順序，如果你把@media (min-width: 768px)寫在了下面那么很悲劇，
@media (min-width: 1200){ //>=1200的設備 }
@media (min-width: 992px){ //>=992的設備 }
@media (min-width: 768px){ //>=768的設備 }
因為如果是1440,由于1440>768那么你的1200就會失效。

所以我們用min-width時，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max-width: 1199){ //<=1199的設備 }
@media (max-width: 991px){ //<=991的設備 }
@media (max-width: 767px){ //<=767的設備 }

另一種是直接在link中判斷設備的尺寸，然后引用不同的css文件：

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

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

在media屬性里：
screen 是媒體類型里的一種，CSS2.1定義了10種媒體類型
and 被稱為關鍵字，其他關鍵字還包括 not(排除某種設備)，only(限定某種設備)
(min-width: 400px) 就是媒體特性，其被放置在一對圓括號中。

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

常用的：
小于768的
768px
768和992之間的
992px
992和1200間的
1200px
大于1200

bootstrap的斷點值：
Bootstrap 是移動設備優(yōu)先的

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) { ... col-sm-3... }

/* 中等屏幕（桌面顯示器，大于等于 992px） */
@media (min-width: 992px) { ... col-md-3...}

/* 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: 1200px) { ... col-lg-3...}

總結：順序不能反
@media (max-width: 767px) { ... col-xs-3... } { //<=767的設備 } 手機
@media (min-width: 768px) { ... col-sm-3... } { //>=768的設備 } 平板
@media (min-width: 992px) { ... col-md-3...} { //>=992的設備 } 電腦
@media (min-width: 1200px) { ... col-lg-3...} { //>=1200的設備 } 大顯示器