HTML5をモバイル端末に適応させるためのいくつかの実装方法の紹介-H5 チュートリアル-php.cn

HTML5をモバイル端末に適応させるためのいくつかの実装方法の紹介

巴扎黑

リリース： 2017-08-18 13:37:53

オリジナル

6942 人が閲覧しました

この記事では、HTML5 モバイルページをモバイル画面に適応させるための 4 つの方法をまとめて紹介します。必要な場合は非常に実用的です。1. メタタグを使用します: viewport

。モバイルページのカスタマイズ広く使用されている方法に適応すると、理論的にはこのタグを使用するとすべての画面サイズに適応できますが、各デバイスによってこのタグの解釈方法とサポートレベルが異なるため、すべてのブラウザまたはシステムと互換性がなくなります。ビューポートは、ユーザーの Web ページの表示領域です。中国語に訳すと「視界」となります。

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

viewport タグとその属性:

コードをコピー

コードは次のとおりです:

各属性の詳細な紹介:

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 では、子孫要素の幅を指します)。これは、単純なページをレイアウトして複雑なページを実装するのが難しい場合にのみ適しています。

以上がHTML5をモバイル端末に適応させるためのいくつかの実装方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。