W3C によると、「device-width」メディア機能は、出力デバイスのレンダリング サーフェスの幅を表します。
@media all and (max-device-width : 480px)
@media all and (device-width : 480px)
これら2つの違いはありますか？
device-widthレンダリング サーフェスの幅と、なぜmax-device-width?
max-device-width/min-device-widthデバイスの最大/最小幅です。
device-widthそれで、プレフィックスなしで使用した場合の device-width との正確な違いは何ですか？
この条件device-width : 480pxは、デバイスの幅が正確に480 ピクセルであることを意味します。この条件max-device-width : 480pxは、デバイスの幅が最大で480 ピクセル、つまり 480 ピクセル以下であることを意味します。
これは紛らわしいかもしれませんが、メディア クエリ構文を定義して、CSS 宣言の一般的な構文、つまり、 property <= valueなどではなく、property : valueを使用するようにしたいと考えていました。したがって、一種の疑似プロパティと考えて、「デバイスの最大幅」という用語ではなく、「デバイスの幅は最大 480px です」と読むことができます。max-device-widthmax-device-width : 480px