メディアクエリを公式化する正しい方法は？

Question

私は、多くの場合、これらの上に呼び出すの2種類の方法を見つけるメディアクエリについて学習しながら：

@media only screen 
    and (min-width: 768px) { 
} 

そして

@media only screen 
     and (min-device-width: 768px) { 
    } 

私が見つけた情報のほとんどはされて「分-デバイス幅」にありました私はちょうど私のコードでそれを実装しようとしたときに、 '最小デバイス幅'は動作せず、 '最小幅'はしました。デモではどちらも動作しますが、理論的には私はどちらか一方を必要としているようです。

なぜこれが正しいのですか？

Answer 1

の両方が有効なメディアクエリですが、異なる結果と：

min-device-widthは

min-widthは、ブラウザウィンドウの幅を指し、デバイスの幅を意味し、したがって、は、（スクロールバーを含みます！）より多くのメディアクエリ（正確な幅のために例えばwidth）がありますが、min-widthとmax-widthは、おそらく最もイムです：ブラウザは必ずしも画面全体に

編集をカバーしていないとして、min-device-widthよりも小さくしますレスポンシブデザインのためのものです。