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

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

1. はじめに

(1)vw/vhの紹介

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

(2)レムの紹介

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

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

2. 本文

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

1vw = 3.75ピクセル

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

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

(3)では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. その他のレスポンシブレイアウトの紹介

(1)フローレイアウト

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

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

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

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

(2)メディア関係のお問い合わせ

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

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

要約:

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

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

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

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

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

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

推薦する

CPU、マシンモデル、メモリなどの情報を表示するLinuxシステム

システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...

Tencent Cloud Serverの構築方法を説明します(グラフィックチュートリアル)

この記事は元々ブロガーのWeiwei Miaoによって書かれたものです。ブログホームページ: htt...

JS の querySelector メソッドと getElementById メソッドの違い

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

ウェブデザイン経験

<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...

divコンテナ内の背景色または画像は、サイズが大きくなるにつれて大きくなります。

コードをコピーコードは次のとおりです。高さ:自動 !重要;高さ:550px;最小高さ:550px; ...

データベースインデックスの知識ポイントの概要

目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...

Linux の netstat コマンドの詳細な紹介

目次1. はじめに2. 出力情報の説明3. netstatの共通パラメータ4. netstatネット...

Linux で履歴コマンドを表示および実行する方法

履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...

Prometheusコンテナのデプロイメントのための実用的なソリューション

環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...

熟練デザイナーの7つの原則(2):色の使い方

<br />前回の記事:優秀なデザイナーの7つの原則(1):フォントデザイン 英語 原文...

yum から docker インストール パッケージをダウンロードし、オフライン マシンにインストールする例の詳細なコード

1. ネットワークマシンでは、デフォルトのcentosyumソースを使用します [root@kole...

docker での psql データベースのバックアップとリカバリの詳細な説明

1. DockerでのPostgresデータベースのバックアップ注文: docker exec it...

スネークゲームを作るための Pygame コード

目次使用されるPygame関数スクリーンの作成ヘビの作成ヘビを動かすゲームオーバーの処理食事を増やす...

Mysqlチュートリアルでのグループランキングの実装例の詳細な説明

目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...

HTML iframe で親ページと子ページ間の双方向メッセージングを実装する例

ある日、リーダーはメイン ページに iframe を埋め込み、親ページと子ページ間で双方向にメッセー...