レスポンシブレイアウトとは何ですか?
レスポンシブ レイアウトとは、同じページが異なる画面サイズで異なるレイアウトになることを意味します。モバイル インターネットが高度に発達した今日、デスクトップ ブラウザーで開発した Web ページは、モバイル デバイスで表示するニーズを満たすことができなくなりました。従来の開発方法では、PC 側で 1 つのページ セットを開発し、モバイル側で別のページ セットを開発します。しかし、端末の種類が増えると、ページの複数の異なるバージョンを開発する必要が生じ、これは非常に面倒になります。レスポンシブ レイアウトを使用するには、1 つのセットを開発するだけで済みます。 EthanMarcotte は2010 年 5 月にレスポンシブ レイアウトの概念を提案しました。つまり、Web サイトは複数の端末に対応できるということです。
レスポンシブ開発と、モバイルおよび PC 用の個別開発の違い: レスポンシブ開発は、一連のインターフェイスを作成するだけで、ビューポートの解像度を検出し、クライアント上でさまざまなクライアントのコード処理を実行することによって、さまざまなレイアウトとコンテンツを表示します。モバイル端末と PC 端末は別々に開発されており、ビューポートの解像度を検出することで、現在アクセスしているデバイスが PC、タブレット、携帯電話のいずれであるかを判断し、サーバーに要求して異なるページを返すことができます。
レスポンシブ開発の原則とは何ですか?
レスポンシブ開発の原則は、CSS3 のメディア クエリを使用して、さまざまな幅のデバイスにさまざまなレイアウトとスタイルを設定し、さまざまなデバイスに適応させることです。
SS3 @media クエリの定義と使用法:
@media クエリを使用すると、メディア タイプごとに異なるスタイルを定義できます。 @media は、さまざまな画面サイズに応じてさまざまなスタイルを設定できます。特に応答性の高いページを設定する必要がある場合、@media は非常に便利です。ブラウザのサイズをリセットすると、ブラウザの幅と高さに基づいてページも再レンダリングされます。
たとえば、画面の幅が 500 ピクセル未満の場合は、背景色を赤に変更します。
レスポンシブ レイアウトを実装するには、一般的に次の方法が使用されます。
(1) CSS でメディア クエリを使用します (最も単純)。
(2) JavaScript を使用します (使用コストが比較的高い)。
(3) サードパーティのオープンソース フレームワーク (さまざまなブラウザをサポートできるブートストラップなど) を使用します。
メタタグを設定する
まず、メタ タグを設定して、ビューポート (Web ページの表示領域) の幅をデバイスの幅と同じにし、ユーザーがページをズームインできないようにブラウザに指示する必要があります。以下に示す:
<metaname=viewportcontent=width=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=no>
ビューポートを設定するときに注意する必要があるのは、Web ページの表示領域のサイズです。高さは特に気にする必要はありません。高さは Web ページのコンテンツによって自動的に拡張されます。上記のメタタグの内容の意味は次のとおりです。
● ビューポート: Web ページの表示領域を表すビューポート。
●width: ビューポートのサイズを制御します。600 などの特定の値、またはキーワードで構成される特別な値を指定できます。たとえば、device-width はデバイスの幅を表します。
●initial-scale: 初期スケーリング率を示します。これは、ページが最初にロードされたときのスケーリング率です。
●maximum-scale: ユーザーがズームインできる最大比率を 0 ～ 10.0 の範囲で示します。
●minimum-scale: ユーザーが 0 ～ 10.0 の範囲の最小スケールにズームできることを示します。
●user-scalable: ユーザーが手動でズームできるかどうかを示します。「はい」はスケーリングが許可されることを意味し、「いいえ」はスケーリングが禁止されることを意味します。
メディアからの問い合わせ
CSS メディア クエリでは、指定された条件に基づいてさまざまなメディア タイプ (スクリーン印刷) にさまざまな CSS スタイルを定義できるため、さまざまなデバイスを使用するユーザーが最高のエクスペリエンスを得ることができます。
例として HTML を使用します。
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>レスポンシブ ページの入門チュートリアル: Albert Yang</title><linkrel =stylesheethref=style.css><linkrel=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVジン=匿名>< / head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>ホームページ</a></li><li><ahref=#>ブログ</ a ></li><li><ahref=#>連絡先</a></li><li><ahref=#>掲示板</a></li><li><ahref=#>私について</a></li><li><ahref=#>フォト ウォール</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden = true></i></div></header><div><div><h2>レスポンシブ レイアウト</h2><p>レスポンシブ レイアウトとは、同じページに異なる画面サイズで異なるレイアウトがあることを意味します。従来の開発方法では、PC 用に 1 セット、携帯電話用に 1 セットを開発しますが、レスポンシブ レイアウトを使用する場合は、1 セットを開発するだけで済みます。レスポンシブ デザインとアダプティブ デザインの違い: レスポンシブ デザインは、一連のインターフェイスを開発し、ビューポートの解像度を検出し、さまざまなクライアントに合わせてクライアント側でコード処理を行うことで、さまざまなレイアウトとコンテンツを表示します。アダプティブ デザインでは、複数のインターフェイス セットの開発が必要です。 、ビューポートの解像度を検出することで、現在アクセスされているデバイスが PC、タブレット、携帯電話のいずれであるかを判断し、それによってサービス層を要求し、異なるページを返します。 CSS3 メディア クエリを使用すると、さまざまなメディア タイプにさまざまなスタイルを定義できます。ブラウザのウィンドウ サイズがリセットされると、ブラウザの幅と高さに基づいてページも再レンダリングされます。 </p><ahref=#>全文を読む</a></div><imgsrc=img.png></div></body></html>
実行結果:
以下は、レスポンシブ レイアウトの実装を示す包括的な例です。
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>レスポンシブ レイアウト</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, user -scalable=no/><style>*{margin:0px;padding:0px;font-family:Microsoft Yahei;}#head,#foot,#main{height:100px;width:1200px;/*width: 85% ;*/background-color:goldenrod;text-align:center;font-size:48px;line-height:100px;margin:0auto;}#headdiv{display:none;font-size:20px;height:30px ;width :100px;背景色:緑;float:right;line-height:30px;margin-top:35px;}#headul{width:80%;}#headulli{width:20%;float:left;text -align :center;list-style:none;font-size:20px;}#main{height:auto;margin:10pxauto;overflow:hidden;}.left,.center,.right{height:600px;line-height :600px ;float:left;width:20%;background-color:red}.center{width:60%;border-left:10pxsolid#FFF;border-right:10pxsolid#FFF;box-sizing:border-box; mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}}@mediaonlyscreenand(max-width:980px){.right{display:none;}.left{width:30% ;}.center{width:70%;border-right:hidden;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height:200px; line-height:200px;}.center{border:hidden;border-top:10pxsolid#FFFFFF;border-bottom:10pxsolid#FFFFFF;height:600px;line-height:600px;}#headul{display:none; headdiv{display:block;}}</style></head><body><div><headerid=head><ul><li>header1</li><li>header2</li><li >header2 </li><li>header2</li><li>header2</li></ul><div>アイコン</div></header><sectionid=main><divclass=left>left< /div ><divclass=center>中央</div><divclass=right>右</div></section><footerid=foot>フッター</footer></div></body></html>実行結果:
