ホームページ >ウェブフロントエンド >H5 チュートリアル >レスポンシブレイアウトとは何ですか?レスポンシブ レイアウトの概要

レスポンシブレイアウトとは何ですか?レスポンシブ レイアウトの概要

不言
不言オリジナル
2018-10-18 10:59:285488ブラウズ

レスポンシブ レイアウトとは何ですか?現在、レスポンシブ レイアウトはますます人気が高まっていますが、レスポンシブ レイアウトが何なのかをまだ知らない人も多いので、興味のある方は次の記事でレスポンシブ レイアウトをご覧ください。

まず見てみましょうレスポンシブ レイアウトとは何ですか?

Baidu Encyclopedia によると、レスポンシブ レイアウトは、2010 年 5 月に Ethan Marcotte によって提案された概念です。つまり、端末ごとにではなく、複数の端末に対応できる Web サイトです。特定のバージョンを作成します。このコンセプトは、モバイル インターネット ブラウジングを解決するために生まれました。

平たく言えば、レスポンシブ レイアウトとは、Web サイトを同時に複数の端末に対応させ、1 つの Web サイトを複数の Web サイトに変換し、リソースを大幅に節約することを意味します。

レスポンシブ インターフェイスには 4 つのレベルがあります。

1. 同じページが異なるサイズや比率でも快適に見える必要があります。2. ページは同じである必要があります。異なる解像度では妥当に見える;

4. 異なる操作方法 (マウスやタッチ スクリーンなど) での同じページのエクスペリエンスは統一される必要があります;

5 、異なる種類の同じページデバイス (携帯電話、タブレット、コンピューター) の種類に応じて、インタラクション方法は習慣と一致している必要があります。

レスポンシブ レイアウトとは何かを理解した後、それについて簡単に説明します。

レスポンシブ レイアウトの使用方法# #1. レイアウトとメタ タグの設定

レスポンシブな Web サイトを作成するとき、またはレスポンシブでない Web サイトをレスポンシブにするときは、まず要素のレイアウトに注意を払う必要があります。たとえば、モバイル デバイスでは、ユーザーが画面をズームすることを禁止する必要があります。禁止されていない場合、表示にズレが生じたり、携帯サイトらしく表示されなくなる可能性があります。したがって、通常のモバイル Web サイトの効果を実現するには、ユーザーが携帯電話で画面をズームすることを禁止するコードを使用する必要があります。

2. メディア クエリを通じてスタイルを設定するメディア クエリ

メディア クエリは、ブラウザと通信し、ブラウザにページのレンダリング方法を指示します。解像度が980px未満の場合はこのように書くと、以前に設定したレイアウトが上書きされます。

3. 複数のビューの幅を設定する


4. レスポンシブな画像

レスポンシブなレイアウトの使用方法を詳しく説明します。 php 中国語 Web サイトの関連するコラムに注目して学習してください。 ! !

以上がレスポンシブレイアウトとは何ですか?レスポンシブ レイアウトの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。