CSS レイアウト 静的レイアウト、アダプティブ レイアウト、流動的レイアウト、レスポンシブ レイアウト、フレキシブル レイアウト

(推奨チュートリアル: CSS ビデオ チュートリアル )

静的レイアウト

従来の Web デザインでは、Web ページ上のすべての要素のサイズの単位として px が使用されます。

1. レイアウトの特性: ブラウザーのサイズに関係なく、Web ページのレイアウトは、コードが最初に記述されたときのレイアウトに従って常に表示されます。従来のPC用Webサイトはすべて静的（固定幅）レイアウト、つまりmin-widthが設定されており、この幅より小さい場合はスクロールバーが表示され、この幅より大きい場合はコンテンツが表示されません。中央に配置され、背景が追加されます。このようなデザインは、PC 側でよく使用されます。

2. デザイン方法:

• PC: 中央揃えレイアウト、すべてのスタイルは絶対幅/高さ (px) を使用し、画面の幅と高さが次の場合にレイアウトをデザインします。を調整し、水平および垂直スクロール バーを使用して、隠れている部分を表示します。

• モバイル デバイス: さらにモバイル Web サイトを作成し、別のレイアウトを設計し、wap などの異なるドメイン名を使用します。 . または m. .

モバイル開発で静的レイアウトを使用する 2 つの方法: (出典: フロー レイアウトとレスポンシブ Web デザインの違いは何ですか?)

(1) 幅の設定ビューポート メタ タグでは =320 であり、ページの各要素も単位として px を使用します。 JS を使用してラベルの初期スケールを動的に変更すると、ページが画面全体に収まるように比例して拡大縮小されます。 (「フロントエンド開発 - Web アプリの変更」を参照)

(2) ビューポートのメタタグにコンテンツ「width=640, user-scalable=no」を設定し、ページの各要素も同様に px を使用します。 640px は携帯電話の幅を超えているため、ブラウザは自動的にページを全画面表示に縮小します (詳細については、コンテンツ「width=640,user-scalable=no」を参照してから、修正を実行してください)。サイズ px デザイン? - フロントエンド開発)

• 利点: このレイアウト方法はデザイナーや CSS ライターにとって最も簡単で、互換性の問題はありません。

• 欠点: ユーザーの画面サイズに応じて異なるパフォーマンスを発揮できないことは明らかです

現在、ほとんどのポータル Web サイトや企業の PC プロモーション サイトでは、このレイアウト方法が採用されています。固定ピクセル サイズの Web ページは、固定ピクセル サイズのディスプレイに合わせる最も簡単な方法です。しかし、この方法は将来の Web ページを作成するための完全な互換性のある方法ではありません。未知のデバイスに適応する何らかの方法が必要です。

ストリーミング レイアウト (リキッド レイアウト)

リキッド レイアウト (「フルイド」とも呼ばれます) の特徴は、画面の解像度に応じてページ要素の幅が調整されることですが、全体的なレイアウトは変更されません。フェンス システム (グリッド システム) として表されます。

Web ページ内の主要な分割領域のサイズにパーセンテージを使用します (min-*、max-* 属性で使用)、たとえば、Web ページの本文の幅を 80% に設定し、min-width は 960px です。画像も同様に処理されます (幅: 100%、max-width は通常、画像自体のサイズに設定されます)

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

2. デザイン方法: % パーセントを使用します 幅と高さはほとんど px 単位で固定されており、リアルタイムのサイズに応じて調整できます。

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

アダプティブ レイアウト (アダプティブ レイアウト)

アダプティブ レイアウトの特徴は、さまざまな画面解像度に合わせてレイアウトを定義すること、つまり、複数の画面解像度を作成することです。静的レイアウト。各静的レイアウトは画面解像度の範囲に対応します。画面解像度を変更すると、異なる静的部分が切り替わります (ページ要素の位置が変わります) が、各静的レイアウトでは、ウィンドウ サイズを調整してもページ要素は変わりません。アダプティブ レイアウトは、一連の静的レイアウトと考えることができます。

1. レイアウト機能: 画面解像度が変わると、ページ内の要素の位置は変わりますが、サイズは変わりません。

2. 設計方法: @media メディア クエリを使用して、さまざまなサイズやメディアのデバイスに応じてさまざまなスタイルを切り替えます。優れた応答範囲設計により、適応範囲内のデバイスに最高のエクスペリエンスを提供でき、レイアウトは実際には同じデバイス上で固定されます。

レスポンシブ レイアウト

CSS3 でのメディア クエリ テクノロジの出現により、レスポンシブ デザインの概念が登場しました。レスポンシブ デザインの目標は、すべての端末 (さまざまなサイズの PC、携帯電話、時計、冷蔵庫の Web ブラウザなど) でページが満足のいく結果を表示できるようにすることです。CSS ライターにとって、実装は特定の手法に限定されず、ただし、通常は、流動的なレイアウト、柔軟なレイアウト、およびメディア クエリ テクノロジーの使用を組み合わせたものです。 ——それぞれ異なる画面解像度に合わせてレイアウトを定義し、同時に各レイアウトで流動レイアウトの概念を適用します。つまり、ウィンドウが調整されるとページ要素の幅が自動的に適応します。つまり、さまざまな画面解像度にそれぞれ対応する複数の流動的なレイアウトを作成します。レスポンシブ レイアウトは、流動的なレイアウトとアダプティブ レイアウトの設計概念を融合したものと見ることができます。

応答性は、優れたページ レイアウトの標準になっています。

1. レイアウト機能: 各画面解像度に応じたレイアウト スタイルがあり、要素の位置とサイズが変わります。

2. 設計方法: メディア クエリとフロー レイアウト。通常、@media メディアクエリとグリッドシステムは相対的なレイアウト単位と組み合わせてレイアウトに使用されますが、実際には上記の応答性や流動性などの技術を組み合わせて、単一の Web ページに異なるスタイルを返す技術の総称です。 CSS を介してさまざまなデバイスを操作できます。

• 利点: PC およびモバイル端末に適応しているため、十分に忍耐強くいれば効果は完璧です

• 欠点: (1) メディアクエリ制限されており、列挙することができ、主流の幅と高さにのみ適応できます。 (2) 十分な画面サイズに合わせるには作業負荷が小さくなく、設計にも複数のバージョンが必要です。

レスポンシブ ページでは、次のコードがヘッダーに追加されます:

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

概要:

レスポンシブと自動の原則アダプテーションの機能は似ています。どちらもデバイスを検出し、異なるデバイスに応じて異なる CSS を使用します。さらに、CSS は固定幅の代わりにパーセンテージを使用します。違いは、レスポンシブ テンプレートが異なるデバイスで異なるように見えることです。それらは異なります。表示スタイルが変わります。デバイスが変化すると、アダプティブは変化しません。すべてのデバイスはテンプレートのセットのように見えますが、長さや画像は小さくなります。デバイスに応じて異なるテンプレートは使用されません。表示スタイルについては、フロー スタイルでいくつかのテンプレートが使用されます幅が一定以上の場合の表示方法と一定以下の場合の表示方法を設定します。表示方法は水の流れと同じで、部分ごとに読み込まれますが、静的な場合は表示方法が使用されます。固定幅。

フロー レイアウトは、解像度が異なる類似のデバイス間の互換性を解決するために使用されます (一般に、解像度の差が少なくなります)。レスポンシブ レイアウトは、解像度が異なる異なるデバイス間の互換性の問題を解決するために使用されます (一般的に、 PC、タブレット、携帯電話、その他のデバイス間の解像度の大きな違い）。

レスポンシブ レイアウトの実装方法: レスポンシブ レイアウト デザインを導入すると、Web ページのレスポンシブ レイアウトが現れます

柔軟なレイアウト (レム/エム レイアウト)

参考: フロー レイアウトとレスポンシブ Web デザインの違いは何ですか?

1. rem と em の違い: rem と em は、異なる Web ページのフォント サイズの表示に適応するように作成されています。このうち、em はその親要素に相対的であるため、実際のアプリケーションでは多くの不都合が生じますが、rem は常にページのルート要素である html のサイズに相対的です。

2. 相対レイアウトには em または rem 単位を使用します。これは、% パーセンテージに対してより柔軟です。同時に、ブラウザのフォント サイズ調整とスケーリングの通常の表示をサポートできます。em は相対値であるため、親要素は取得されません。 [中国の Web サイトが Web ページを作成するとき、全員に同じ効果が表示されるように、CSS を使用してフォント サイズを強制的に定義することに慣れています。NetEase や Sohu などのポータルを含むほとんどのサイトでは、絶対単位 px (ピクセル) が使用されます。ただし、ウェブサイトの使いやすさを考慮すると、フォントサイズは可変であるべきであり、視力の悪い人によっては、ページの内容をはっきりと見るためにフォントを拡大する必要があります。しかし、ブラウザ市場の大部分を占めるIEでは、pxを単位としたフォントサイズの調整ができません。外国人はウェブサイトの使いやすさを重視しており、すでに相当数の海外ウェブサイトでフォント単位としてemが使用されています。 ]

3. このタイプのレイアウトの特徴は、テキストを囲む各要素のサイズが em/rem 単位であるのに対し、ページの主要な分割領域のサイズはパーセンテージまたはレム単位のままであることです。 px単位（「フロースタイルレイアウト」または「静的/固定レイアウト」と同じ）。この場合、初期のブラウザはページ全体の比例的な拡大縮小をサポートせず、Web ページ内のテキスト サイズの拡大のみをサポートします。単位として em/rem を使用すると、テキストを囲む要素をテキストの拡大縮小に合わせて拡大縮小できます。

4、浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

Set body font-size to 62.5% for Easier em Conversion:

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？

因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。

针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }

6、使用rem单位的弹性布局在移动端也很受欢迎。

工具ViewtoREM：PX转换到REM（自动预处理）

rem的定义：font size of the root element，rem是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。

rem与em、px的区别：

• px：像素，比较精确的单位，但不好做响应式布局

• em：以父节点font-size大小为参考点，标准不统一，容易造成混乱

• REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。

对于不同尺寸的屏幕，可以统一假设屏幕宽度为640px后编写CSS（当然你也可以假定统一为320px）。此时，我们设定html元素的font-size为40px（同样，只是举例），然后各处（元素尺寸、文字大小）使用rem作为单位，随后搭配媒体查询或JS，根据屏幕的大小来动态控制html元素的font-size（特定屏幕尺寸下，html元素的font-size应当设置为何值，是使用这个方案时设计师和程序员需要反复考虑后确定的，以下试举一段相关的CSS媒体查询代码），即可自动改变所有用rem定义尺寸的元素的大小（且CSS编写者在脑中进行换算的计算过程比em简单得多）。

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。详细可参考：视区相关单位vw, vh…简介以及可实际应用场景

以下优缺点参考：响应式设计和REM布局的对比（有疑问）

• 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

• 缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。

响应式和弹性布局之间的对比：

响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。

rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

结论：

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；

2. モバイル端末で作業していて、デザインに高さと要素の間隔に対する高い要件がない場合は、フレキシブル レイアウト (rem js) が最適な選択です。1 つの部分は CSS、もう 1 つの部分は js で調整します。 font-size;

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

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がCSS レイアウト 静的レイアウト、アダプティブ レイアウト、流動的レイアウト、レスポンシブ レイアウト、フレキシブル レイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。