HTML5 モバイルページはどのように画面に適応しますか? HTML5 ページを携帯電話の画面に適応させる 4 つの方法-H5 チュートリアル-php.cn

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

不言

リリース： 2018-08-20 13:48:35

オリジナル

6102 人が閲覧しました

この記事の内容は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 サイトの他の関連記事を参照してください。