HTML5 では、モバイルページを携帯電話の画面に適応させるために 4 つの方法を使用します。-H5 チュートリアル-php.cn

HTML5 では、モバイルページを携帯電話の画面に適応させるために 4 つの方法を使用します。

黄舟

リリース： 2018-05-16 10:24:21

オリジナル

8196 人が閲覧しました

この記事では、HTML5 モバイルページをモバイル画面に適応させるための 4 つの方法をまとめて紹介します。必要な場合は非常に実用的です。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"/>

ログイン後にコピー

各属性の詳細:

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 では、モバイルページを携帯電話の画面に適応させるために 4 つの方法を使用します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。