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でマウントされたディレクトリが読み書きできない問題を解決する

推薦する

シンプルなタブバー切り替えケースを実現するJavaScript

この記事では、タブバーの切り替え効果を簡単に実現するためのJavaScriptの具体的なコードを参考...

Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策

1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...

ブラウザ内でHTMLタグを中央に配置するCSSスタイル

CSS スタイル:コードをコピーコードは次のとおりです。 <スタイル タイプ="te...

MySQL における INSERT INTO SET の利点

MySQL データベースにデータを挿入します。以前はよく使われていた INSERT INTO テーブ...

MySQL の自動増分主キーに関する詳細な説明

目次特徴保存戦略自己増加の決定自動増分値の変更実行プロセス問題点自動増分ロックロック戦略バッチ挿入の...

JS で Websocket ベースのマルチターミナル ブリッジング プラットフォームを実装する方法

目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...

MySQL 5.7.21 winx64 グリーンバージョンのインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 5.7.21のインストールと設定方法を記録しています。具体的な内容は以下のと...

jwtを使用してノードによって生成されたトークンをどこに保存するかについての簡単な説明

A: 通常はクライアントに保存されます。 jwt または JSON Web Token は、リクエス...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

体験したい17 404ページ

404 を避けるべきだとどうして言えるのでしょうか? その理由は、ほとんどの 404 ページが粗雑す...

Javascript の基礎: 演算子とフロー制御の詳細な説明

目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...

LinuxベースのSelenium環境を構成し、操作を実装する

1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...

Quickjs は JavaScript サンドボックスの詳細をカプセル化します

目次1. シナリオ2. 基盤となるAPIを簡素化する2.1 自動的に破棄を呼び出す2.2 VM値を作...

LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています

概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

XHTML 入門チュートリアル: XHTML ハイパーリンク

ハイパーリンクはインターネット全体を接続していると言っても過言ではありません。ハイパーリンクは、別の...