レスポンシブレイアウトについて知っておくべきこと

1. はじめに

レスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時に適応し、ユーザーの使用環境 (画面サイズ、入力方法、デバイス/ブラウザの機能) に応じて Web サイトのレイアウトと機能を変更できるようになります。この記事では主に、レスポンシブレイアウトに関する重要でありながら見落とされがちな知識のポイントを紹介します。より質の高い記事を読みたい場合は、GitHubブログをクリックしてください。

2. ビューポート

モバイルフロントエンドでよく言及されるビューポートは、Web ページを表示するために使用されるブラウザー内の領域です。特にブラウザウィンドウのサイズを変更できる場合、ビューポートは通常、画面サイズと同じではありません。携帯電話と PC のビューポートには違いがあります。PC のビューポートの幅は解像度と同じですが、モバイルデバイスのビューポートの幅は解像度とは関係ありません。デフォルトの幅の値はデバイスの製造元によって指定されます。 iOS と Android では、基本的にビューポートの解像度は 980 ピクセルに設定されます。

1. モバイルビューポートを 980 ピクセルに設定する必要があるのはなぜですか?

当時、ジョブズは次のように想像していました。「iPhone が市場で普及しても、さまざまなウェブサイトがモバイルフレンドリーなウェブページを作成する時間がなかった場合、ユーザーは携帯電話を使用してコンピュータ版のウェブページにアクセスする必要があります。どうすれば、大画面のページを小さな画面で読みやすくできるでしょうか?」ボスジョーは、携帯電話のビューポートの幅を固定し、携帯電話のビューポートの幅を世界中のほとんどの PC Web ページのページ幅である 980 ピクセルと同じにしたいと考えていました。こうすることで、携帯電話を使用してコンピュータ版の Web ページにアクセスするときに、その横に空白スペースがなくなります。ただし、ページを拡大するとテキストが非常に小さくなり、ユーザーはテキストをはっきりと見るために手動で拡大/縮小する必要があり、これは非常に悪いエクスペリエンスです。

2. ビューポートを制限する

前の問題を解決するには、Web ページに次のコード行を追加します。

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=0" />

width=device-width ビューポートはデバイスの幅（人間が設定した幅）です //設定されていない場合、デフォルトは 980px です
initial-scale=1.0 初期ビューポートサイズは1.0です。maximum-scale=1.0 最大倍数は1.0です。user-scalable=0 ビューポートのスケーリングは許可されていません。

ビューポートタグは、ブラウザに Web ページをレンダリングする方法を指示します。ここで、タグはデバイスの幅 (device-width) に応じて Web ページのコンテンツをレンダリングすることを意味します。実際に、このタグをサポートするデバイスでの効果を見ていただければ、ご理解いただけると思います。

ビューポートを制限した後

悪くないですね！ユーザーエクスペリエンスが大幅に向上しました! ！！
このとき、document.documentElement.clientWidth を使用してブラウザ画面の幅をテストすると、現在のビューポートの幅が携帯電話の画面の幅と等しく、おおよそのビューポートの幅は 320 ～ 480 (携帯電話を縦向きに使用した場合) であることがわかります。
このビューポートのサイズは携帯電話メーカーによって設定され、たとえば 16 ピクセルのテキストがこのビューポート内で明瞭かつ適切なサイズになることが保証されます。したがって、大画面の携帯電話の制約されたビューポートは、小画面の携帯電話の制約されたビューポートよりも大きくなります。これにより、Web ページで px を使用してフォントサイズと行の高さを記述できるようになります。
制約後のビューポートの幅は、ビューポート自体の解像度ではないことに注意してください。！各携帯電話の解像度は、ビューポートの幅よりもはるかに大きくなります。
最も重要な一文: フロントエンド開発エンジニアは携帯電話の解像度をまったく気にしません。私たちが気にするのはビューポートだけです。

3. 写真

「一枚の写真は千の言葉に値する」とよく言われますが、それは本当です。マフィンに関するテキストをウェブページにどれだけ載せても、写真ほど魅力的にはなりません。次に、ページの上部にパンケーキの画像（幅 2000 ピクセル）を追加します。これは、ユーザーを下に向けさせる大きなタイトル画像と同様の効果があります。

写真を追加した後

わあ、これは本当に大きな画像ですね。ページ全体のバランスが悪く、横方向にはみ出しています。いいえ、この問題は解決しなければなりません。 CSS を使用して画像に固定の幅を与えることができますが、問題は、さまざまなサイズの画面で画像を自動的に拡大縮小したいことです。たとえば、この例の iPhone 画面の幅は 320 ピクセルです。画像の幅を 320 ピクセルに設定すると、iPhone 画面を回転させるとどうなるでしょうか?このとき、320 ピクセルは 480 ピクセルになります。
解決策は簡単です。CSS コードを 1 行追加するだけで、コンテナの幅に合わせて画像が自動的に拡大縮小されます。

画像 {
 最大幅: 100%;
}

携帯電話に戻ってページを更新すると、結果は期待どおりになります。
ここで max-width ルールを宣言すると、すべての画像が最大でそのサイズの最大 100% で表示されるようになります (つまり、画像は画像自体と同じ大きさでしか表示されません)。このとき、画像を含む要素（画像を含む body や div など）が画像の本来の幅よりも小さい場合、画像は利用可能な最大スペースを埋めるように拡大縮小されます。

width:100% を使用しないのはなぜですか?

画像の自動スケーリングを実現するには、width:100% などのより一般的な幅属性を使用することもできます。ただし、このルールはここでは適用されません。このルールにより、コンテナと同じ幅で表示されるためです。コンテナの幅が画像よりもはるかに広い場合、画像は不必要に引き伸ばされます。

4. モバイルブラウザカーネル

モバイル側では、Microsoft の Trident、Firefox の Gecko、オープンソースカーネルの Webkit、Opera の Presto という 4 つの独立したブラウザーカーネルしかありません。
現在、モバイル端末のWP7、8システムの組み込みブラウザとしては、主にMicrosoftのTridentが使用されています。 Opera の Presto カーネルには、主に Opera Mobile、Opera Mini、Opera ブラウザ、Opera HD ベータ版が含まれています。 Webkit カーネルの適用範囲は比較的広く、Android ネイティブブラウザ、Apple の Safari、Google Chrome (Android 4.0 で使用) はすべて Webkit オープンソースカーネルに基づいて開発されています。

互換性のあるプレフィックス:
1ミリ秒
2 -モズ-
3 -o-
4 -ウェブキット-

中国ユーザーのブラウザ市場シェア:

過去1年間の中国ユーザーのブラウザ市場シェア

UC、Android 組み込み、Chrome、Safari、QQ ブラウザはすべて Webkit カーネルをベースとしており、図からわかるように、これらが市場シェアの大部分を占めています。
したがって、-webkit- を慎重に扱う必要があります。一部の企業では、単に -webkit- との互換性のみを記述し、-ms- などの他の互換性は記述しません。

5. フローレイアウト

パーセンテージレイアウトは、フローレイアウトやフレキシブルボックスレイアウトとも呼ばれます。モバイル Web ページには中央のページがなく、両側にページが埋められています。
パーセンテージで設定できるプロパティは、幅、高さ、パディング、およびマージンです。境界線やフォントサイズなどの他のプロパティは、パーセンテージを使用して設定することはできません。

幅がパーセンテージで記述されている場合、それは親要素の幅のパーセンテージを指します。
高さがパーセンテージで記述されている場合、それは親要素の高さのパーセンテージを指します。
パディングがパーセンテージで記述されている場合、水平パディングか垂直パディングかに関係なく、親要素の幅のパーセンテージを指します。
マージンがパーセンテージで記述されている場合、それは水平マージンであろうと垂直マージンであろうと、親要素の幅のパーセンテージを指します。
境界線の幅をパーセンテージで設定することはできません。

例を見てみましょう:

	div{
		幅:200px;
		高さ:300px;
		パディング:10px;
	}
	div p{
		幅:50%;
		高さ:50%;
		パディング：10%;   
	}
    このときのpの実際の幅はどれくらいでしょうか?

pのボックスモデル図

この時点でpの実際の幅は140px*190pxです

VI. メディアからの問い合わせ

1. レスポンシブ Web デザインにメディアクエリが必要なのはなぜですか?

CSS3 メディアクエリを使用すると、特定のデバイスの機能や条件に基づいて、特定の CSS スタイルを Web ページに適用できます。メディアクエリがなければ、CSS のみを使用して Web ページの外観を大幅に変更することは不可能です。このモジュールを使用すると、水平または垂直の画面の向き、大きいまたは小さいビューポートなど、予測できない多くの要因に適応する CSS ルールを事前に記述できます。柔軟なレイアウトにより、特定のサイズの画面を含むより多くのシナリオにデザインを適応させることができますが、レイアウトをより詳細に調整する必要があるため、それだけでは不十分な場合があります。これを可能にするのがメディアクエリです。これは CSS の基本的な条件ロジックに相当します。

2. メディアクエリ構文

メディアクエリの外部で記述する最初のルールは、あらゆるデバイスに適用される「ベース」スタイルです。これを基に、さまざまなビューポートと機能を備えたデバイス向けに、さまざまな視覚効果と機能を徐々に追加していきます。

体 {
    背景色: グレー;
 } 
@media スクリーンと (min-width:1200px) {
    体{
        背景色: ピンク;
	}
}
 @media スクリーンと (最小幅:700px) と (最大幅:1200px) {
    体{
	背景色: 青;
	}
}
@media スクリーンと (最大幅:700px) {
    体{
	背景色: オレンジ;
        }
}

@media はメディアクエリを表し、現在この Web ページを表示しているデバイスとその幅を照会します。画面とは、この Web ページを表示するためのデバイスが、障害者用の補聴器やプリンターではなく、モニターであることを意味します。すべての可能性をリストするには、および記号を使用します。
注:メディアクエリはセレクターのみをラップでき、k:v ペアはラップできません。
IE6、7、8 はメディアクエリをサポートしていません。一部のモバイルブラウザーがメディアクエリをサポートしなくなるのを防ぐため、すべてのセレクターをメディアクエリに含めないでください。

7. Rem レスポンシブレイアウト

rem レスポンシブレイアウトのアイデア

通常、要素に特定の幅を設定する必要はありませんが、一部の小さなアイコンには特定の幅の値を設定できます。
高さの値は固定値に設定できます。デザイン案のサイズを厳密に記載します。
すべての固定値はREM単位で設定されます（最初にHTMLでベンチマーク値を設定します：PXとREMの対応する比率、次にレンダリングでPX値を取得し、レイアウト時にREM値に変換します）
JSは実際の画面幅を取得し、それを設計案の幅で割って比率を計算し、比率に応じて以前のベンチマーク値をリセットすることで、プロジェクトをモバイル端末に適応させることができます。

rem とは何ですか? また、em とどう違うのですか?

rem: 現在のページ内の要素の REM 単位のスタイル値は、HTML 要素のフォントサイズ値に基づいて動的に計算されます。
em: 親要素のフォントサイズの倍数を示します。（特別な場合：text-indent属性ではテキストの幅を示します）

  本文→フォントサイズ:20px;
   <div class="box1"> → フォントサイズ:2em;
	ボックス1
	  <div class="box2"> → フォントサイズ:2em;
		ボックス2
	    <div class="box3"> → フォントサイズ:2em;
	    	ボックス3
	    </div>
	 </div>
  </div>

結果を得る

em を単位として使用すると、font-size プロパティが計算されて継承され、box1 は 40px と計算されます。すると、内部の box2 と box3 は 40px を継承します。 em単位はフォントサイズの設定だけでなく、幅、高さ、パディング、マージン、境界線などのボックスモデルのプロパティの設定にも使用できます。
rem の利点の 1 つは、メディアクエリを使用してレスポンシブレイアウトを実現できることです。

@media スクリーンと (最小幅: 320px) {
    html {フォントサイズ: 14px;}
}
@media スクリーンと (最小幅: 360px) {
    html {フォントサイズ: 16px;}
}
@media スクリーンと (最小幅: 400px) {
    html {フォントサイズ: 18px;}
}

アプリケーションシナリオ

作成した H5 ページにモバイルデバイスからのみアクセスされる場合、これは REM が下位バージョンのブラウザーと互換性がないためです。モバイル端末と PC 端末でコードセットを共有する場合は、フローレイアウトを使用することをお勧めします。

REM レスポンシブレイアウトの作り方

1. UIデザイナーからPSDデザインを取得し、スタイル内のHTMLのフォントサイズの値を設定します。通常は、後の計算に便利な値を設定します。例：100px

html{
フォントサイズ:100px; //1rem=100px
}

2. ページとスタイルを記述する<br /> まず、デザイン原稿のサイズに合わせてスタイルを記述します。次に、スタイル値を記述する際に、ピクセル値を 100 で割って対応する REM 値を計算する必要があります。
実際のプロジェクトでは、外側のボックスの幅に固定値を書き込むことは通常ありません。フローレイアウトの考え方に従って、パーセンテージを使用してレイアウトします。

マージン:0 0.2rem
高さ:3rem;

3. 現在の画面の幅とデザイン案の幅に基づいて、HTML のフォントサイズ値を計算します<br /> 例: デザイン案の幅は 640 ピクセルで、パーツの 1 つはスライドショーで、サイズは 600*300 です。スタイルで、HTML のフォントサイズ値を 100 ピクセルに設定すると、スライドショーのサイズは 6rem×3rem になります。携帯電話の画面の幅が 375 ピクセルの場合、フォントサイズはどのくらいに設定する必要がありますか。

375/640*100->fontsize=58.59375//スライドショーは携帯電話の画面サイズに合わせて調整できます

現在の画面幅とデザインの下書き幅の比率に基づいて、現在の幅でフォントサイズの値が何になるかを動的に計算します。フォントサイズの値が変わると、それに応じて以前に設定されたすべての REM 単位の値が自動的に増加または減少します。これは次のコードで実現できます。

<スクリプト>
~関数(){
var desW=640,
winW=document.documentElement.clientwidth、
比率=winW/desW;
document.documentElement.style.fontSize=比率*100+"px";
}();
</スクリプト>

ただし、現在の画面の幅がデザインの幅よりも大きい場合は、画像が引き伸ばされて歪んでしまうため、上記のコードを少し変更する必要があります。

//html 部分 <section id="main">
<div class="box"></div>
</セクション>
//js 部分 <script>
~関数(){
var desW=640,
winW=document.documentElement.clientwidth、
比率=winW/desW;
var oMain = document.getElementById('main');
if(winW>desW){
oMain.style.width=desW+"px";
oMain.style.margin="0 自動";
戻る;
}
document.documentElement.style.fontSize=比率*100+"px";
}();
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: 設計仕様に準拠した設計は良い設計でしょうか?

>>: ページスピードの最適化の概要