html5レスポンシブデザインとはどういう意味ですか?

html5 レスポンシブ デザインとは、パーセンテージ レイアウトを使用して流動的で柔軟なインターフェイスを作成し、メディア クエリを使用して要素の変化範囲を制限することを意味します。レスポンシブ デザインの概念は、流動的なレイアウト、伸縮性のある画像、伸縮性のあるテーブル、 elastic ビデオやメディア クエリなどのテクノロジーの組み合わせ。

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、Dell G3 コンピューター。

html5 レスポンシブ デザインの意味

レスポンシブとは:

レスポンシブ デザインのコンセプトは、流動的なレイアウト、柔軟な画像、柔軟なテーブルに基づいています。 、エラスティックビデオやメディアクエリなどのテクノロジーを組み合わせたものです。パーセンテージ レイアウトを使用して流動的で柔軟なインターフェイスを作成し、メディア クエリを使用して要素の変更範囲を制限します。この 2 つの組み合わせがレスポンシブ デザインの中核を形成します。

ビューポートとは:

ビューポートはレスポンシブ デザインにおいて非常に重要な概念です。ビューポートの概念は、モバイル ブラウザーの 2 種類のビューポートに分けられます。1 つはデバイスのサイズである可視ビューポート、もう 1 つは Web ページの幅であるウィンドウ ビューポートです。

タグ

HTML5 では、 タグを使用してビューポートのプロパティを構成できます

基本構文:

  <meta name="viewport" content="uesr-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">

Attribute説明:

uesr-scalable=no: ユーザーがズームできるかどうかを設定するために使用され、デフォルト値は yes です。

width=device-width: ウィンドウのビューポートの幅を設定するために使用されます。ここでの意味は、「表示されるビューポートの幅は同じです」と同じです。

initial-scale=1.0: 初期ズーム率の設定に使用され、値は 0·10.0

maximum-scale=1.0 です。最小ズーム率の設定に使用されます。値は 0.10.0です。

height: ウィンドウのビューポートの幅の設定に使用されます。

minimum-scale: 最小ズーム率の設定に使用されます

メディア クエリ

CSS3 仕様では、メディア クエリはビューポートの幅、デバイスの向きなどの違いに基づいてページの表示モードを変更できます。メディア クエリは、メディア タイプと条件式で構成されます。

サンプル コードは次のとおりです:

@media screen and(max-width:960px){
               /*样式设置：表示媒体类型screen并且屏幕宽度小于等于960px时的样式*/
  }

パーセント レイアウト:

固定レイアウト (ピクセル単位) をパーセント幅に変換してパーセントを実現できます。レイアウト:

変換式は次のとおりです: ターゲット要素の幅/親ボックスの幅 = 幅の割合

(学習ビデオの共有: css ビデオ チュートリアル 、html ビデオ チュートリアル)

以上がhtml5レスポンシブデザインとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。