1.デバイス幅 定義: 出力デバイスの画面表示幅を定義します。 Web ページが Safari で開かれているか、Web ビューに埋め込まれているかに関係なく、device-width はデバイスにのみ関連します。同じデバイスの場合、その値は変わりません。 たとえば、iPhone 6 のデバイス幅 * デバイス高さは 375 * 667 ですが、これは DPR などとは何の関係もありません。 2.幅 定義: 出力デバイスでのページの表示領域の幅を定義します。 出力は、Web ページの表示領域の幅と高さです。Web ページが Webview にネストされたモバイル Web ページであると仮定すると、幅は実際には Webview の幅と高さです。幅と高さがブラウザーによって異なる場合、ページで rem レイアウトを使用し、Retina 画面の場合は dpr>1、メタ タグが content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover" に設定されていると仮定すると、iPhone 6 上の幅は 750 ピクセルになります。 ここでは、水平画面の状況を考慮する必要がないため、device-width と device-height をより頻繁に使用します。 たとえば、iPhone X に適応したい場合、iPhone X のサイズ (375*812) が既にわかっている場合は、次のステートメントを使用できます。 /*iPhoneX*/ @media 画面のみ、(device-width:375px)、(device-height:812px)、(-webkit-device-pixel-ratio:3) { .foriphoneX() } もう一つの例は、サムスンの最新の折りたたみ式スクリーンだ。 @media screen および (デバイス幅: 586px) および (デバイス高さ: 820px) { html{ フォントサイズ: 110px !重要; } } つまり、device-width はデバイスによって変化しません。その値はデバイスの幅に関係します。幅は、レイアウト スキームやコンテナーによって表示が異なる場合があります。ここでは、device-width は js の window.screen.width に相当し、width は js の document.body.clientWidth に相当すると思います。 また、Huaweiの折りたたみ画面に適応した状況を記録しておきたいと思います。現時点では実機がないので、Huaweiの展開画面の解像度は2200*2480であることしかわかっていません。DPRは明確ではないので、device-widthとdevice-heightはわかりません(ここではwidthを使ってクエリすることはできません。理由はビジネスロジックに関係しています)。そのため、device-aspect-ratioを選択しました。 最初はこれをless @media (デバイスアスペクト比: 55/62) { /*適応*/ } CSSのデバイスアスペクト比は小数として計算されます @media (デバイスアスペクト比: 0.887097) { /*適応*/ } device-aspect-ratioは小数点をサポートしていないため、一致できません そこで、less が 55/62 の結果を実行しないようにする方法を調べたところ、次のように属性を引用符で囲み、その前にチルダを追加することで実行できることがわかりました。 @media (デバイスアスペクト比: ~"55/62") { /*適応部分*/ } 問題は解決しました! ただし、MDN では device-aspect-ratio の使用は推奨されなくなり、この属性は徐々に廃止される予定です。より良い解決策が見つかった場合は、代替案を使用します。 CSS3 メディアクエリにおける device-width と width の違いについて詳しく説明したのはこれで終わりです。CSS3 device-width に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: MySQL の無効な左結合の問題を解決する方法とその使用上の注意
>>: HTML で js を使用してローカル システム時間を取得する
Cockpit は、CentOS および RHEL システムで使用できる Web ベースのサーバー管...
conda アップデート conda pip で tf-nightly-gpu-2.0-previ...
マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...
目次序文エラーオブジェクト投げる試して…捕まえて…最後に最終ルールトライ/キャッチパフォーマンスウィ...
オリジナル: http://developer.yahoo.com/performance/rule...
マタタグとは<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ペー...
目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...
1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...
目次1. nginxのインストールと操作(Mac OS環境) 2. nginxルールの設定3. コマ...
以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...
この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...
上の記事で、SWFObject V1.5 の使い方の紹介は一旦終了です。これから、SWFObject...
MySQL 8.0.16で初回ログイン時のパスワードを変更する方法を紹介します。 MySQLデータベ...
私のおすすめ複数のIEバージョンの共存のためのソリューション以前に IE6、IE7、IE8 の共存に...
目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...