CSS3 メディアクエリにおけるデバイス幅と幅の違いの詳細な説明

CSS3 メディアクエリにおけるデバイス幅と幅の違いの詳細な説明

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 を使用してローカル システム時間を取得する

推薦する

nginxとバックエンドポート間の競合の解決策

質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...

DockerコンテナにRedisをデプロイする手順の紹介

目次1 つの Redis 設定ファイル2 Dockerコマンドの開始3 docker-compose...

Docker5フル機能の港湾倉庫構築プロセス

Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...

Vue.js の watch メソッドと computed メソッドの違いの詳細な例

目次序文導入1. 作用機序2. 自然から3. 時計と計算の比較4. メソッドはデータロジックの関係を...

Linux ディレクトリ切り替え実装コード例

ファイルの切り替えは Linux でよく行われる操作です。Linux を初めて学ぶときに最初に触れる...

Alibaba Cloud で静的ウェブサイトを素早く構築する方法

序文:ジュニアプログラマーとして、私は自分自身の個人ウェブサイトを構築し、それを他の人に見せることを...

JS ES6コーディング標準の詳細な説明

目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...

CentOS7 で MySQL 5.7.24 をコンパイルしてインストールする詳細なチュートリアル

目次依存関係をインストールするブーストをインストールMySQLをコンパイルしてインストールする構成依...

js と jQuery での Ajax の使用例の詳細

目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...

MySQLテーブル名の大文字と小文字を区別しない設定方法の詳細な説明

デフォルトでは、Linux の MySQL はテーブル名の大文字と小文字を区別します。 MySQL ...

DockerがMySQL構成実装プロセスを開始

目次実際の戦闘プロセスまずは主なコマンドと詳細を一つずつ説明しましょう起動が成功したかどうかを確認す...

mysql の追加、削除、変更、クエリの基本ステートメント

文法以下は、MySQL テーブルにデータを挿入するための INSERT INTO コマンドの一般的な...

MySql8.0バージョンに接続するMyBatisの設定問題について

mybatis を学習しているときにエラーが発生しました。エラーの内容は次のとおりです。データベース...

スタイリッシュなウェブページデザインを作成する方法(グラフィックチュートリアル)

「壮大」という言葉は、おそらく現代のデザイナーが最も聞きたくない言葉でしょう。デザイナー:「デザイン...

Docker に ElasticSearch をインストールする方法を 1 つの記事で解説

目次序文1. Dockerをインストールする2. ElasticSearchをインストールする3. ...