CSSのdevice-widthとwidthの違いは何ですか

1. device-width

定義: 出力デバイスの画面の表示幅を定義します。

Web ページが Safari で開かれているか、Web ビューに埋め込まれているかに関係なく、device-width はデバイスにのみ関係し、同じデバイスの場合、その値は変わりません。

たとえば、iphone6 の device-width*device-height は 375*667 ですが、これは dpr などとは関係ありません。

(推奨チュートリアル: CSS チュートリアル)

2. width

定義: ページの表示領域の幅を定義します。出力機器。

出力は、Web ページの表示領域の幅と高さです。Web ページが Web ビューにネストされたモバイル Web ページであると仮定すると、幅は実際には Web ビューの幅と高さになります。ブラウザが異なると、幅と高さも異なる場合があります。ページが rem レイアウトを使用しており、Retina 画面の場合は、メタ タグで dpr>1、content="width=device-width、initial-scale=0.5" が設定されます。 . minimum-scale=0.5, minimum-scale=0.5, user-scalable=no,viewport-fit=cover" の場合、iPhone 6 の幅サイズは 750px になります。

ここでは、水平画面の状況を考慮する必要がないため、device-width と device-height をさらに使用します。

たとえば、iphoneX に適応している場合は、すでに iphoneX ( 375) を知っています。 *812) の場合は、次のステートメントを使用できます:

@media screen and (device-width: 586px) and (device-height: 820px){
    html{
        font-size: 110px !important;
    }
}

つまり、デバイス幅はデバイス内では変更されません。その値はデバイスの幅に関連しています。幅は、レイアウト プランやディスプレイが異なると変化します。ここで、device-width は js の window.screen.width に相当し、width は js の document.body.clientWidth に相当すると思います。

また、ファーウェイの折りたたみスクリーンを適応させた状況をここに記録します、現時点では実機がないため、ファーウェイの展開状態の解像度が 2200*2480 であり、DPR がまだ明確ではないので、device-width と device-height がわかりません (ここではクエリに幅を使用できません。理由はビジネス ロジックに関連しています)。そこで、device-aspect-ratio,

# を選択しました。 ##最初は私のレスにありました このように書かれています

@media (device-aspect-ratio: 55/62) {
    /*适配*/
}

CSSのdevice-aspect-ratioは10進数として計算されます

@media (device-aspect-ratio: 0.887097) {
    /*适配*/
}

device-aspect-ratioは小数をサポートしていません

そこで、less が 55/62 の結果を実行しないようにする方法を調べたところ、次のように属性を引用符で囲み、その前にチルダを追加するだけで十分であることがわかりました。

@media (device-aspect-ratio: ~"55/62") {
    /*适配部分*/
}

問題は解決しました!

ただし、MDN ではデバイス アスペクト比は推奨されなくなり、この属性は廃止されます。

推奨される関連ビデオ チュートリアル:

css ビデオ チュートリアル

以上がCSSのdevice-widthとwidthの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。