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 を使用してローカル システム時間を取得する
質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...
目次1 つの Redis 設定ファイル2 Dockerコマンドの開始3 docker-compose...
Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...
目次序文導入1. 作用機序2. 自然から3. 時計と計算の比較4. メソッドはデータロジックの関係を...
ファイルの切り替えは Linux でよく行われる操作です。Linux を初めて学ぶときに最初に触れる...
序文:ジュニアプログラマーとして、私は自分自身の個人ウェブサイトを構築し、それを他の人に見せることを...
目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...
目次依存関係をインストールするブーストをインストールMySQLをコンパイルしてインストールする構成依...
目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...
デフォルトでは、Linux の MySQL はテーブル名の大文字と小文字を区別します。 MySQL ...
目次実際の戦闘プロセスまずは主なコマンドと詳細を一つずつ説明しましょう起動が成功したかどうかを確認す...
文法以下は、MySQL テーブルにデータを挿入するための INSERT INTO コマンドの一般的な...
mybatis を学習しているときにエラーが発生しました。エラーの内容は次のとおりです。データベース...
「壮大」という言葉は、おそらく現代のデザイナーが最も聞きたくない言葉でしょう。デザイナー:「デザイン...
目次序文1. Dockerをインストールする2. ElasticSearchをインストールする3. ...