HTML5 モバイル ページはどのように画面に適応しますか? HTML5 ページを携帯電話の画面に適応させる 4 つの方法

この記事の内容はCSS3でのbackground-orginの使い方（コード付き）です。必要な方は参考にしていただければ幸いです。

1. メタタグを使用します: viewport

理論的には、このタグを使用するとすべての画面サイズに適応できますが、このタグの解釈とサポートはデバイスによって異なります。度を超えると、すべてのブラウザまたはシステムとの互換性が失われます。

ビューポートは、ユーザーのWebページの表示領域です。中国語に訳すと「視界」となります。

モバイルブラウザは、仮想「ウィンドウ」(ビューポート) にページを配置します。通常、この仮想「ウィンドウ」(ビューポート) は画面よりも広いため、各 Web ページを小さなウィンドウに押し込む必要はありません (これにより、モバイル ブラウザー用に最適化されていない Web ページのレイアウトを壊すなど)、ユーザーがパンやズームして Web ページのさまざまな部分を表示できるようになります。

Viewport タグとその属性:

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

各属性の詳細な紹介:

属性名	価値	説明
幅	正の整数またはデバイス幅	ビューポートの幅をピクセル単位で定義します
身長	正の整数またはデバイスの高さ	ビューポートの高さをピクセル単位で定義します。通常は使用されません
初期スケール	[0.0-10.0]	初期スケーリング値を定義する
最小スケール	[0.0-10.0]	最小スケールを定義します。最大スケール設定以下である必要があります
最大規模	[0.0-10.0]	最大倍率を定義します。最小スケール設定以上である必要があります
ユーザー拡張可能	はい/​​いいえ	ユーザーがページを手動でズームできるかどうかを定義します。デフォルト値は「はい」です

2. css3 単位 rem を使用する

rem は、CSS3 の新しい相対単位 (root em、root em) です。rem を使用して要素のフォント サイズを設定する場合、それは相対的なサイズになります。は HTML 要素に対してのみ相対的です。これにより、ルート要素のみを変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。

現在、IE8 以前のバージョンを除くすべてのブラウザが rem をサポートしています。サポートしていないブラウザの場合は、追加の絶対単位宣言を記述します。これらのブラウザは、rem で設定されたフォント サイズを無視します。以下に例を示します。

p {font-size:14px; font-size:.875rem;}

HTML のデフォルトのフォントサイズは 16px、つまり 1rem=16px です。p の幅が 32px の場合、2rem に設定できます。

通常、値の計算を容易にするために、デフォルトの 10px である 62.5% がベースとして使用されます。もちろん、このベースは、特定の状況に応じて任意の値にすることができます。設定方法は次のとおりです:

Html{font-size:62.5%(10/16*100%)}

異なる画面でのルールの具体的な定義、つまりベースを定義する方法: CSS を通じて定義でき、異なる幅の範囲で異なるベース値を定義できます。もちろん、次のように一度 js で定義することもできます。

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + &#39;px&#39;;//其中“20”根据你设置的html的font-size属性值做适当的变化
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener(&#39;DOMContentLoaded&#39;, recalc, false);
    })(document, window);
</script>

3. メディア クエリを使用する

解決したい問題は、携帯電話の画面に適応することです。メディアクエリはこの問題を解決するために生まれました。

メディアクエリの機能は、メディアごとに異なるCSSスタイルを設定することです。ここでの「メディア」には、ページサイズ、デバイスの画面サイズなどが含まれます。

例: ブラウザウィンドウが 500px より小さい場合、背景は水色になります:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

4. パーセンテージを使用します

パーセンテージは親要素を参照し、すべてのパーセンテージは次のようになります。子要素の幅が 50% の場合、親要素の幅は 100% になります。したがって、本文のデフォルトの幅は画面の幅になります (PC では、子孫要素の幅を指します)。これは、単純なページをレイアウトして複雑なページを実装するのが難しい場合にのみ適しています。

おすすめ関連記事:

HTML Web ページを携帯電話の画面に自動的に適応させる方法_html/css_WEB-ITnose

HTML5 開発における画面適応用のビューポート

以上がHTML5 モバイル ページはどのように画面に適応しますか? HTML5 ページを携帯電話の画面に適応させる 4 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。