レスポンシブ レイアウトの一般的なソリューション (メディア クエリ、パーセンテージ、rem、vw/vh)

フロントエンド開発プロセスでは、静的 Web ページは通常、 さまざまな解像度 のデバイスに適応する必要があります。。/remおよび    一般的に使用される適応ソリューションには、メディア クエリ、パーセンテージ、vw vhpx

1 つ目pxとビューポート

    一般に、Web ページを作成する場合、長さと幅を記述するために最も一般的に使用される単位はピクセル ( px) であり、pc最終的に表現の実際の長さは固定であるcssと一般に考えられています。1px

    実際にはそうではなく、pxデバイスに関係するもので、例えば16pxfont-size が の場合、pc端末とモバイル端末のサイズが異なります。

   では、実際の長さは何によって決まるのでしょうかcss? 1pxまず最初に、ピクセルとビューポートとは何かを知る必要があります。

1.ピクセル

    ピクセルは、Web ページ レイアウトの基礎です。ピクセルは、コンピュータ画面上に表示できる最小領域を表します。ピクセルは、cssピクセルと物理ピクセルの 2 種類に分類されます。cssピクセルは、 Web 開発者cssにとってピクセルで使用される抽象的な単位です。物理ピクセルはデバイスのハードウェア密度にのみ関連し、どのデバイスの物理ピクセルも固定されています。

cssピクセルと物理ピクセル間の変換関係を   明確にするには、まずビューポートとは何かを理解する必要があります。

2. ビューポート

    広いビューポートはブラウザがコンテンツを表示する領域を指し、狭いビューポートにはレイアウト ビューポート、ビジュアル ビューポート、理想的なビューポートが含まれます。

(1) レイアウトビューポート

   レイアウト ビューポートは、pcモバイル側の Web ページのデフォルトのレイアウト動作です。これは、通常、pc解像度が高く、レイアウト ビューポートのデフォルトが であるためです980px。つまり、 Web ページが設定されていないviewport場合、pcモバイル端末上の Web ページは、デフォルトでレイアウト ビューポートに基づいてモバイル端末に表示されます。

(2) ビジュアルビューポート

   ビジュアルビューポートはブラウザに表示されるWebサイトの表示領域であり、ユーザーはWebページのコンテンツをズームして表示することでビジュアルビューポートを変更できます。ビジュアル ビューポートの定義は、虫眼鏡を持って同じオブジェクトをさまざまな距離から観察することと同じです。ビジュアル ビューポートは、虫眼鏡に表示されるコンテンツとのみ類似しているため、ビジュアル ビューポートは、オブジェクトの幅と高さには影響しません。レイアウトビューポート。

(3) 理想的なビューポート

   理想的なビューポートは、デバイスの物理要素を考慮した最適な「レイアウト ビューポート」です。

   解像度と物理ピクセルの関係は何ですか?DPRデバイスのピクセル比で表すと、次のように記述できます。

DPR = 物理像素／分辨率

   スケーリングを行わない場合、1 つのcssピクセルは 1 に対応しますdpr。つまり、スケーリングなしでは次のようになります。

CSS像素 = 物理像素／分辨率

    モバイル端末のレイアウトでは、viewportメタ タグを通じてレイアウトを制御できます。たとえば、通常の状況では、次のタグを使用してモバイル端末のレイアウトを理想的なビューポートに作成できます。

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

width=device-width;一般的には解像度の幅を指しますが、この設定ではレイアウトビューポートを理想的なビューポートに設定します。

属性名	価値	説明
幅	正整数	レイアウト ビューポートの幅をピクセル単位で定義します。
身長	正整数	レイアウト ビューポートの高さをピクセル単位で定義します。通常は使用されません。
初期スケール	[0,10]	ズーム率を初期化します。1 はズームなしを意味します
最小スケール	[0,10]	最小ズーム倍率
最大スケール	[0,10]	最大ズーム倍率
ユーザーが拡張可能な	はい・いいえ	ページの手動拡大縮小を許可するかどうか。デフォルト値は「はい」です。

3.px適応型

    モバイルデバイスごとに解像度が異なります。つまり、cssピクセルで表現できる物理ピクセルが異なるため、長さと幅の単位としてcssのみ使用すると、結果として、px一連のスタイルを通じてそれぞれの目的を達成する 子適応

2. 報道機関からのお問い合わせ

   @media メディア クエリは、さまざまなメディア タイプ、特にレスポンシブ ページの場合にさまざまなスタイルを定義することです。適応効果を実現するために、さまざまな画面サイズに合わせて複数のスタイル セットを記述することができます。

@media screen and (max-width: 960px){
    
    
    body{
    
    
      background-color:#6633FF;
    }
}

@media screen and (max-width: 768px){
    
    
    body{
    
    
      background-color:#00FF66;
    }
}
/*
    通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～768px以及768px～960px的屏幕设置了不同的背景颜色。
*/

    メディア クエリを使用すると、解像度の異なるデバイスに応じてさまざまなスタイルを記述して応答性を向上させることができますが、メディア クエリの欠点も非常に明らかです。ブラウザのサイズが変わると、変更する必要があるスタイルが多すぎます。 、スタイルのセットがたくさんあり、コードは非常に複雑に見えます

3. パーセンテージ

    パーセンテージを使用して応答性の効果を実現することもできます。具体的な効果としては、ブラウザのサイズが変化すると、ブラウザ内のコンポーネントの幅と高さがパーセンテージ単位で変化する可能性があることです。

   最も重要な質問はcss、サブ要素の割合が誰の割合であるかということです。

   通常であれば、親要素と完全に同等であることが真っ先に思いつきますが、この考え方は正しいのですが、ボックスモデルの場合は、cssheight、width属性に加えて、padding、borderなどの属性も持っています。 、およびマージン。

1、具体分析

次に、例を挙げて説明します

 <div class="box1">
        <div class="box2"></div>
    </div>

      .box1{
    
    
            width: 200px;
            height: 150px;
            background-color: darkseagreen;
        }

(1) 子要素の高さと幅の割合

   width属性とheight属性のみの場合

.box2{
    
    
            width: 50%;
            height: 50%;
            background-color: darkslategray;
        }

    実行結果:

(2) 上下左右

   子要素がデフォルトで配置される場合、合計のパーセンテージを設定する場合はtop親bottom要素の高さを基準とし、合計のパーセンテージを設定するleft場合は親要素の幅を基準とします。right

      .box2{
    
    
            width: 80px;
            height: 60px;
            position: relative;
            top: 50%;
            bottom: 50%;
            left: 50%;
            right: 50%;
            background-color: darkslategray;
        }

   操作の結果は次のようになります。

（3）padding/margin

paddingパーセンテージを設定する    場合、それが垂直方向であっても水平方向であってもwidth、直接の親要素などに対してmarginのみpadding相対的になります。

         .box2{
    
    
            width: 80px;
            height: 60px;
            position: relative;
            /*padding-left和padding-top均为60px，因为父元素的width为200px*/
            padding-left: 30%;
            padding-top:30%;
            background-color: darkslategray;
        }

   操作結果:

（4）border-radius

    パーセンテージが子要素自体の幅に対して相対的に設定されている場合、これは角の丸い属性です。

   .box2{
    
    
            width: 80px;
            height: 80px;
            position: relative;
            border-radius: 50%;
            background-color: darkslategray;
        }

    操作結果:

### 2. パーセント単位レイアウトの適用

    縦横比を固定した長方形を設定したい場合は、padding属性を使用して実現できます。paddingパーセンテージの単位は、垂直方向または水平方向に関係なく、親要素の幅を基準とするため、パーセンテージpadding-topに設定して適応可能な四角形を実現できます。

<div class="box1"></div>

     .box1{
    
    
            width: 600px;
            height: 0;
            padding-top:40%;
            background-color: darkseagreen;
        }
      /*任意缩放，盒子大小改变，高度比例不变*/

4. 適応型シナリオrem

1.remユニット

   remブラウザによってピクセルに変換されて表示される、柔軟で拡張可能なユニットです。em 単位とは異なり、rem単位はネスト レベルに関係なく、ブラウザのルート要素 (HTML 要素) のフォント サイズのみを基準とします。デフォルトでは、html要素のフォントサイズは次のとおりです。16px

   計算の便宜上、通常は次のように設定できます。

    html{
    
      font-size:62.5%  }

   この状況では、1rem=10px

2.remレイアウトのデメリット

   レスポンシブ レイアウトでは、jsルート要素のサイズは を介し​​て動的に制御する必要がありますfont-size。

   つまり、cssスタイルとコードjsの間には一定の関係があります。font-sizeまた、変更したコードはcssスタイルの前に配置する必要があります。

5. vw/を通じてvh自己適応を実現する

    css3新しい単位vw/が に導入されましたvh。これはビュー ウィンドウに関連しており、vwビュー ウィンドウに対する幅とvhビュー ウィンドウに対する高さを示します。

   vh vw ウィンドウの幅と高さに応じて 100 等分されます。100vhつまり、フルハイトと50vhハーフハイトを意味します。