ホームページ > 記事 > ウェブフロントエンド > css3のdevice-widthとwidthの違いについての簡単な説明
この記事では、CSS メディア クエリのデバイス幅と幅の違いについて説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
#[推奨チュートリアル: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 サイトの他の関連記事を参照してください。