首先我們在使用Media的時候需要設定下面這段程式碼，來相容移動裝置的展示效果

準備工作1：設定Meta標籤

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 

• width = device-width   寬度等於當前裝置的寬度
• initial-scale = 1.0        初始縮放比例（預設1.0）
• maximum-scale = 1.0 允許使用者縮放到最大比例（預設1.0）
• minimum-scale =  1.0 允許使用者縮放到最小比例（預設1.0）

準備工作2：載入相容js檔案

因為IE8既不支援HTML5也不支援CSS3的Media，所以我們需要載入兩個js檔案，來保證我們實現相容效果

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

這段程式碼後面加了一個chrome=1,這個谷歌內嵌瀏覽器框架GCF，如果使用者電腦裡面裝了chrome的外掛，那就可以讓電腦裡面的IE不管是哪個版本都可以使用Webit引擎以及V8引擎進行排版及運算，無比給力，不過使用者要是沒裝這個外掛，那這段程式碼就會讓IE以最高的文件模式展現，建議加上。

進入CSS3 Media寫法：

@media screen and (max-width: 960px){
    body{
        background: #ccc;
    }
}

當瀏覽器尺寸大於960px的時候程式碼

@media screen and (min-width:960px){
    body{
        background:orange;
    }
}

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

裝置畫素比（關於手機端1畫素大小不一的問題）

在實際開發中，有時候寫的是1px,但是手機上看起來是2px,有很多種方法可以解決，通過transform: sacleY() 可以實現，也有通過背景圖，viewport實現的

下面是通過transform來實現手機端的1畫素,用的stylus語法

border-t-1px($color) //border-top
  position: relative
  &::before
    display: block
    position: absolute
    left:0
    top:0
    width:100%
    border-top:1px solid $color
    content:' '
border-b-1px($color) //border-bottom
  position: relative
  &::after
    display: block
    position: absolute
    left:0
    bottom:0
    width:100%
    border-top:1px solid $color
    content:' '

@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5)
  .border-t-1px
    &::before
      -webkit-transform: scaleY(0.7)
      transform:scaleY(0.7)
@media(-webkit-min-device-pixel-ratio: 2),(min-device-device-pixel-ratio: 2)
  .border-t-1px
    &::before
      -webkit-transform: scaleY(0.5)
      transform:scaleY(0.5)
@media(-webkit-min-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5)
  .border-t-1px
    &::before
      -webkit-transform: scaleY(0.4)
      transform:scaleY(0.33333334)
@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5)
  .border-b-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform:scaleY(0.7)
@media(-webkit-min-device-pixel-ratio: 2),(min-device-device-pixel-ratio: 2)
  .border-b-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform:scaleY(0.5)
@media(-webkit-min-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5)
  .border-b-1px
    &::after
      -webkit-transform: scaleY(0.4)
      transform:scaleY(0.4)