JS に依存せずにレスポンシブレイアウトを実現する CSS3 モバイル vw+rem メソッド

1. はじめに

（１）vw/vhの紹介

使用する前に、vw と rem とは何か、その機能について簡単に見てみましょう。vw は CSS3 の新しい単位で、「view width」の略語です。現在の画面を 100 の部分に分割することとして定義されます。1vw は画面の 1% です。対応する vh は高さを 100 の部分に分割します。1vh は画面の高さの 1% です。一般的に、レスポンシブ開発を完了するには、vw 単位を使用することが多いです。

（２）レムの紹介

rem は相対的な長さの単位です。ルート要素 (つまり HTML 要素) を基準にして、font-size の計算値の倍数になります。たとえば、HTML フォントが 20px に設定されている場合、ページ内の 1rem は 20px に相当します。次に例を示します。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8" />
<タイトル></タイトル>
<スタイル>
html,h1 {
    フォントサイズ: 12px;
}
ｐ {
    フォントサイズ: 2rem;
}
</スタイル>
</head>
<本文>
<h1>私はh1のテキストです</h1>
<p>私は p タグ内のテキストで、h1 テキストの 2 倍の長さです</p>
</本文>
</html>

2. 本文

（1）上記の2つのユニットを理解しておけば、変換を通じてモバイル端末のレスポンシブレイアウト処理を完了できます。ここでは、画面幅が375pxのiPhone 6/7/8を例に挙げます。

1vw = 3.75ピクセル

（２）では、100pxに相当するvwがいくつあるか考えてみましょう。ここではいくらかの計算が必要です。

100px = 26.6666666vw //無限ループなので、ここでは小数点以下7桁を取る

（３）ではremとvwをどのように接続するのでしょうか？ここで小さなケースを書いてみます:

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、height=デバイス高さ、初期スケール=1.0、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">
    <タイトル></タイトル>
    <link rel="スタイルシート" href="">
    <スタイル タイプ="text/css" メディア="screen">
        html{
            フォントサイズ: 26.6666666vw  
        }
        p{
            フォントサイズ: 0.2rem;
            幅: 2rem;
            高さ: 1rem;
            背景: ピンク;
            マージン: 0 自動;
            行の高さ: 1rem;
            テキスト配置: 中央;
        }
    </スタイル>
</head>
<本文>
    <P>私はPタグ内のテキストです</P>
</本文>
</html>

上記の例では、HTMLのfont-sizeを26.6666666vw（font-size = 100px）に設定し、remの特性と組み合わせてフロントエンドのCSSレスポンシブレイアウトを実現しています。

まとめ：フロントエンドのレスポンシブレイアウトにはさまざまな種類があり、PC用のレスポンシブフレームワークも多く、モバイル端末用のフレームワークもレスポンシブなものが多くあります。この方法も比較的使いやすい方法だと思います。HTMLのフォントサイズは任意に設定できますが、変換するのは非常に面倒なので、多くの方法が考案されています。私が使用しているSublime Editorのように、多くのエディターには自動変換機能があります。インターネット上には、オンラインのWebページ変換も多数あります。さて、上記は私が使用した経験です。間違いがあれば、ご指摘ください。

3. その他のレスポンシブレイアウトの紹介

（１）フローレイアウト

フローレイアウトはパーセンテージレイアウトです。たとえば、Web ページ本体の幅を 80% に設定し、最小幅を 960 ピクセルに設定します。画像も同様に処理されます (幅: 100%、最大幅は通常、伸縮による歪みを防ぐために画像自体のサイズに設定されます)。

レイアウト特性: 画面解像度が変更されると、ページ上の要素のサイズは変更されますが、レイアウトは変更されません。 [つまり、画面が大きすぎたり小さすぎたりすると、要素が正しく表示されません]

デザイン方法: 幅は%パーセンテージで定義し、高さは主にpxで固定します。ビューポートと親要素のリアルタイムサイズに応じて調整し、さまざまな解像度に可能な限り適応します。これは、max-width/min-width やその他のプロパティと組み合わせて使用され、大きすぎたり小さすぎたりして読みにくくならないようにサイズ範囲を制御します。

このレイアウト方法は、Web フロントエンド開発の初期の歴史で、さまざまなサイズの PC 画面に対応するために使用されていました (画面サイズがそれほど大きく異ならなかったとき)。今日のモバイル開発でも一般的なレイアウト方法ですが、明らかな欠点があります。主な問題は、画面サイズの範囲が大きすぎると、元のデザインに比べて小さすぎる画面や大きすぎる画面では適切に表示されないことです。幅は % パーセンテージで定義されますが、高さと文字サイズは主に px で固定されているため、大画面の携帯電話での表示効果は、一部のページ要素の幅が非常に長く引き伸ばされますが、高さと文字サイズは以前と同じまま (つまり、「流動的」にはならない) になり、表示が非常に不統一になります。

（２）メディア関係のお問い合わせ

メディアクエリは、現在の画面の幅を監視して、対応する設定に応答します。たとえば、375px 画面のフォントサイズは 12px で、960px 画面のフォントサイズは 18px です。単純なページに書き込むには非常に大きいですが、大規模なプロジェクトには非常に便利です。メディアクエリの特徴の 1 つは、375px 画面から 960px 画面にズームすると、フォントまたは画像が突然拡大されることです。これは悪い体験ですが、実際の使用では問題ではありません。
レイアウト機能: 各画面解像度ごとにレイアウトスタイルがあり、要素の位置とサイズが変わります。

デザイン手法: メディアクエリ + 流動的なレイアウト。

要約:

1. PC 側でのみ作業する場合は、ストリーミングレイアウト (固定幅) が最適です。

2. モバイル端末で作業していて、デザインに高い高さと要素間隔が必要ない場合は、CSS を使用してフォントサイズを調整することで実行できるエラスティックレイアウト (vw) が最適です。

3. PC とモバイルの互換性が必要であり、要件が非常に高い場合は、高さと幅に応じてデザインが異なり、レスポンシブレイアウトがメディアクエリに応じて異なることを条件として、メディアクエリが依然として最適な選択肢となります。

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

<<: MySQL killコマンドの実行原理の詳細な説明

>>: dockerでマウントされたディレクトリが読み書きできない問題を解決する