レスポンシブ Web サイトについて知っておくべきことは何ですか?

#レスポンシブ Web サイトとは何ですか?

レスポンシブ Web サイトを任意のデバイスで開いた場合、各 Web ページのコンテンツがオーバーフローしたり、他の Web ページに隠れたりすることはありません。たとえば、任意のサイズのデバイスで TutorialsPoint.com Web サイトを開きます。ユーザーは、Web ページのコンテンツは同じままですが、コンテンツの置き換えが異なるため、コンテンツが読みやすくなっていることがわかります。

つまり、レスポンシブ Web サイトの基本は、コンテンツをあらゆるデバイスで見やすくスタイリッシュにすることです。

レスポンシブな Web サイトが必要なのはなぜですか?

ここで問題は、なぜ応答性の高い Web サイトが必要なのかということです。これが答えです。

以前は、ユーザーはデスクトップからのみ Web サイトにアクセスできましたが、現在では、モバイルやタブレット デバイスなど、さまざまなサイズのデバイスから Web サイトにアクセスできるようになりました。 Web サイトのトラフィックのほとんどは、デスクトップ デバイスではなくモバイル デバイスから来ています。

現在、あらゆる企業がインターネット上で運営されており、Web サイトを通じてオンラインで顧客を引き付けようとしています。ユーザーがモバイル デバイスから Web サイトにアクセスし、Web サイトがレスポンシブ デザインでない場合、ユーザーはすぐに Web サイトを閉じて、競合他社の Web サイトにアクセスします。

つまり、応答性の高い Web サイトは、より多くの顧客や訪問者を獲得するのに役立ちます。

レスポンシブ Web サイトの作成を開始するにはどうすればよいですか?

ブラウザのサイズに基づいて共通のブレークポイントを使用し、それに応じて HTML 要素のスタイルを設定する必要があります。以下は一般的なブレークポイントです。

リーリー

最初のステップとして、次のメタ タグを セクションに追加する必要があります。

リーリー

ここで、HTML コンテンツは Web ページと同じままですが、HTML コンテンツがどのデバイスでも簡単に読めるように CSS を記述する必要があります。

例 1 (要素の寸法をパーセンテージで設定)

以下の例では、2 つの 'col' div 要素を含む 'container' div 要素があります。コンテナ div 要素の寸法をパーセントで設定し、'col' div 要素の寸法をパーセントで設定しています。 .

出力では、ユーザーは任意のサイズのデバイスで読み取れることがわかります。

リーリー

例 2 (メディア クエリの使用)

以下の例では、メディア クエリを使用してレスポンシブ Web デザインを作成します。メディア クエリを使用すると、Web ページにブレークポイントを追加し、デバイスごとに個別にスタイルを設定できます。

ここで、幅が 600 ピクセル未満のデバイスの「メイン」 div のサイズを変更したことがわかります。また、モバイル デバイスのフォント サイズ、フォントの色、マージンも変更しました。メディアクエリ。

リーリー

例 3 (クランプ機能を使用)

以下の例では、clamp() 関数を使用して Web ページをレスポンシブにしました。clamp() 関数は 3 つの引数を受け取り、1 つ目は最小幅、2 つ目はパーセンテージ、3 つ目は最大幅。

ここでは、clamp() 関数の最初のパラメータとして 400px、2 番目のパラメータとして 30%、3 番目のパラメータとして 600px を渡しています。これは、どのデバイスでもカードの幅がこれより小さくなることはありません。 400ピクセル以上600ピクセル以下。画面幅の 30% が 400px ～ 600px の場合、値はカードの幅に設定されます。

出力では、ユーザーはさまざまなデバイス上のカードを観察し、カードが応答するかどうかを確認できます。

リーリー

例 4 (Flexbox の概要)

以下の例では、レスポンシブ Web ページを作成するための Flexbox を紹介します。 「display flex」を使用すると、任意の HTML 要素を Flexbox として表示できます。その後、さまざまな CSS プロパティを使用して、Flexbox のコンテンツをカスタマイズできます。

ここでは、複数の「col」 div を含む「row」 div があります。「row」 div のサイズはデバイスのサイズに応じて変化しますが、「col」 div のサイズは固定されています。 'flex-wrap:wrap' CSS プロパティを使用して、'row' div 内のコンテンツをラップしました。行の幅に基づいて、単一行内の 'col' div の合計数が表示されます。

リーリー

このチュートリアルでは、ユーザーは Web サイトをレスポンシブにする方法を学びました。上の例は、レスポンシブな Web サイトを作成するために使用されるさまざまな CSS プロパティ、関数、ルールを示しています。開発者はこれらすべてを組み合わせて、実際の Web サイトを作成する必要があります。ここでは、学習目的のためだけに 1 つの例で 1 つの属性を使用します。

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