メディアクエリ使用とデバイスピクセル比

まずMediaを使用するときは、モバイルデバイスの表示効果を互換化するために、次のコードを設定する必要があります.
準備作業1:Metaタグの設定

コードパラメータの説明:

width = device-width   幅は現在のデバイスの幅に等しい

initial-scale = 1.0        初期スケール(既定1.0)

maximum-scale=1.0ユーザーを最大スケール(デフォルト1.0)

にスケールできます.

minimum-scale =  1.0ユーザーを最小スケール(既定1.0)

にスケールできます.
準備作業2:互換jsファイルのロード
IE 8はHTML 5もCSS 3のMediaもサポートしていないので、互換性を保証するために2つのjsファイルをロードする必要があります.

準備作業3:IEのレンダリング方法をデフォルトで最高に設定する(オプション)

もっと良い書き方があります

このコードの後ろにchrome=1が付いています.このグーグルにはブラウザフレームワークGCFが内蔵されています.もしユーザーのパソコンにchromeのプラグインが入っていれば、パソコンのIEはどのバージョンでもWebitエンジンやV 8エンジンを使ってレイアウトや演算を行うことができます.このコードはIEを最高のドキュメントモードで表示し、追加することをお勧めします.
CSS 3 Mediaの書き方に入ります.

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

これはMediaの標準的な書き方です.コードは、ページが960 px未満の場合、次のコードを実行することを意味します.
ブラウザサイズが960 pxより大きい場合のコード

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

上記の使い方を混在させることもできます.

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

このコードは、ページ幅が960 pxより1200 px未満の場合に次のコードを実行することを意味します.
デバイスピクセル比(携帯端末1ピクセルサイズが異なる問題について)
実際の開発では1 pxと書かれている場合がありますが、携帯電話では2 pxのように見え、transform:sacleY()で実現できる方法もあれば、背景図、viewportで実現できる方法もたくさんあります
携帯電話端末の1画素をtransformで実現する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)