HTML5 レスポンシブ レイアウトの基本 (1)

HTML5レスポンシブレイアウト(1)

モバイル端末開発のレイアウト手法 - Fluid Layout

Fluid Layoutの概念は、最初に目にしたときは非常に高度なものに見えますが、より深く理解すると、 HTML デスクトップ Web 開発の経験がある人にとっては、実際には非常に簡単であることが後でわかります。流動的なレイアウトは、実際にはデスクトップ上のハードコードされたレイアウトの一部を、さまざまなモバイル サイズに適応するパーセンテージに変更します。

フロー レイアウトは、平たく言えばパーセンテージ レイアウトとも呼ばれます。通常、これには次の点が含まれます:

• 幅のパーセンテージ

• 位置のパーセンテージ

• pxをem、remに置き換えてください

• 弾性画像 これらのパーセンテージを設定するための参照オブジェクトは、携帯電話の画面サイズに応じて適応され、サイズ適応を通じて特定の効果が達成されます。

なぜモバイル端末に適応させるために流動的なレイアウトを使用する必要があるのでしょうか?

固定ピクセル サイズの Web ページは、固定ピクセル サイズのディスプレイに合わせる最も簡単な方法です。しかし、この方法は将来の Web ページと完全に互換性のある作成方法ではなく、未知のデバイスに適応するためのいくつかの方法が必要です。固定ピクセル サイズ (960/980) は将来保証されません。

パーセンテージを使用してページをレイアウトするにはどうすればよいですか?

サイズのパーセンテージ:

Web ページを固定レイアウトからパーセンテージ レイアウトに変更します:

覚えておくべき公式: ターゲット要素の幅 / コンテキスト要素の幅 = 幅のパーセンテージ。

追記: ここでのコンテキスト要素の幅は、それに関連付けられた親要素の幅を指し、これは子要素の幅のパーセンテージに直接影響します。

位置パーセンテージ:

基本的にサイズパーセンテージと同様で、元の固定マージンまたは位置決め距離をパーセンテージに変換します

例:

、ページの左側が 50 ピクセル、コンテキスト幅が 320 ピクセル、つまり 50/320 = 15.625%

小数点以下 5 桁。

em:

em の機能は通常、フォント サイズを設定し、その親に標準フォント サイズを設定し、 em を通じてフォントのパーセンテージを制御することです。

• emの値は固定されていません。

• em は親要素のフォント サイズを継承します。

rem:

フォントのパーセンテージ表示や、画面サイズに応じた比例したフォントサイズの変更は実際の開発プロセスで実現できますが、構造的な入れ子が発生し、親要素のフォント比率が変化するため、emを使用してフォントを変更すると、計算量が非常に多くなります。それは必然的に開発に一定の負担を引き起こすことになります。

新しい単位 rem が css3 に導入されました。これは HTML タグに基づいてのみ変更されます。

rem は root em の略で、em のルートは html であり、html に基づいてのみ割合が変化することを意味します。

弾性画像:

画像設定の幅: 100%、または背景サイズ: 100% 100%。

画像設定閾値: max-width.

は画像の最大値と最小値を設定できます。

もちろん、流動的なレイアウトはモバイル端末に適応するための手段にすぎず、レスポンシブWebページの効果を達成することはできません。後で、メディア クエリと呼ばれる別の適応方法を紹介します。この 2 つの適応方法を組み合わせてのみ、最終的なレスポンシブ レイアウト効果を実現できます。

上記は HTML5 レスポンシブ レイアウトの基礎 (1) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。