css3のdevice-widthとwidthの違いについての簡単な説明-CSSチュートリアル-php.cn

css3のdevice-widthとwidthの違いについての簡単な説明

青灯夜游

リリース： 2021-02-08 10:35:39

転載

2315 人が閲覧しました

この記事では、CSS メディアクエリのデバイス幅と幅の違いについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

css3のdevice-widthとwidthの違いについての簡単な説明

#[推奨チュートリアル:

CSS ビデオチュートリアル]

1.device-width

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

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

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

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) size には次のステートメントを使用できます:

/*iphone x*/
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .foriphoneX()
}

ログイン後にコピー

別の例は、最新の Samsung 折りたたみ式スクリーンです

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

ログイン後にコピー

つまり、 device-width は device 内で変更されず、その値は変わりません。はデバイスの幅に関係します。異なるレイアウトスキームまたは異なるコンテナで表示されると、幅は異なる場合があります。ここでは、device-width は js の window.screen.width に相当し、width は js の document に相当すると思います。 . .body.clientWidth。

Huawei の折り畳み式スクリーンの改造も記録します。現時点では実際の携帯電話がないため、Huawei の展開時の解像度が 2200*2480 であり、DPR などがないことだけがわかります。明らかなので、device-width と device-height がわかりません (クエリに幅は使用できません。理由はビジネスロジックに関連しています)。そこで、device-aspect-ratio,

を選択しました。最初は私の中でした。lessではこのように書かれています

@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 では推奨されなくなりました。この属性は廃止されます。より良い解決策が見つかったら、代替手段を使用します。

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。！

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