モバイル端末の適応に関する簡単な説明

序文

フロントエンドコードの記述では、「互換性」という言葉から逃れることはできません。過去の PC 時代、プログラマーは IE の傲慢さのために IE 互換性の道で苦労してきました。現在、モバイルデバイスの普及により、IE がなくなるかのような希望が生まれているようですが、しかし!一つの波の攻撃が収まる前に、また別の波が侵略してきます～モバイル端末はIEを考慮する必要がなく、さまざまな新しいCSS機能も非常に楽しく使用できますが、大きな山が迫っています。それは解像度の適応です。モバイル端末の表示領域は比較的小さいため、解像度の異なる携帯電話でのページの表示詳細もより厳しくする必要があります。このとき、PC端末のような幅と高さを固定したレイアウト方法は明らかに適していません。さまざまなサイズの携帯電話ページに適応できることが求められています。本当にとても興味深いです。

では、早速、モバイル端末向けの一般的な適応手法をいくつか紹介します。

1. パーセンテージ

使用シナリオ: テキストブロックなど、画面に合わせて幅のみを調整する必要がある

パーセンテージはPC適応でもよく使われ、本当に使いやすいのですが、一般的には幅適応の設定に使われます。高さをパーセンテージで設定する場合、その親要素には明確な高さが必要です。

1. パーセンテージを使用して全画面を埋める

要素の高さを 100% 有効にしてウィンドウの高さと正確に一致させるには、html 要素と body 要素、およびそれらのすべての親要素の高さを 100% に設定する必要があります。

例えば：

<html スタイル="高さ: 100%;">
  <body style="height: 100%;">
    <div class="wrap" style="高さ: 100%; 幅: 100%">
        全画面に表示する</div>
  </本文>
</html>

高さ 100% を使用する場合の注意事項:

余白とパディングにより、ページにスクロールバーが表示されますが、これは望ましくない可能性があります。
要素の実際の高さが設定したパーセンテージの高さより大きい場合、要素の高さは自動的に拡張されます。

ここまで書いてきて、突然余談したくなりました。絶対配置の要素の場合、height: 100% の使用は明らかに無効です。なぜなら、この時点ではドキュメントフローから分離されており、その高さは独自のコンテンツによってサポートされているためです。親ボックスを埋めたい場合はどうすればいいでしょうか?ここには黒魔術があり、上、左、下、右を 0 に設定すると、ボックスは親ボックスを埋めるために引き伸ばされます。

2. パーセンテージを使用してアスペクト比を修正する

場合によっては、幅を適応させ、高さを幅に合わせて変え、アスペクト比を固定したいことがあります。

見てみましょう。高さのパーセンテージを使用しても明らかに機能しません。高さのパーセンテージは親要素の高さに基づいており、幅に基づいて高さを設定する必要があります。

したがって、ここでは padding-top または padding-bottom を使用できます。パディングは親要素の幅に基づきます。要素の高さを 0 に設定し、padding-bottom を使用して要素を引き伸ばし、固定のアスペクト比を実現できます。

2. レム

使用シナリオ：写真など、高い適応性が求められるシーン

rem単位: ページのルートフォントサイズ、つまりHTML要素のフォントサイズに基づきます。例:

html{
    フォントサイズ:16px;
}

すると、1rem は 16px に等しくなります。

したがって、これを使用する場合は、ルートフォントサイズを画面サイズに合わせて調整するだけで、幅と高さを設定するために rem 単位を使用するページ上のすべての要素も画面サイズに合わせて調整されます。

さまざまな画面サイズに応じてルートフォントサイズを設定するには、次の 2 つの方法があります。

1. remを設定するCSSメソッド

メディアクエリを使用して、さまざまな画面サイズに応じて設定します。欠点は、一般的にいくつかの代表的な画面サイズのみがリストされ、適応によってすべての範囲を完全にカバーできないことです。

html{
    フォントサイズ:10px
} 
@media スクリーンと (最小幅:321px) と (最大幅:375px) {
    html{
        フォントサイズ:11px
    }   
} 
@media スクリーンと (最小幅:376px) と (最大幅:414px) {
    html{
        フォントサイズ:12px
    }
} 
@media スクリーンと (最小幅:415px) と (最大幅:639px) {
    html{
        フォントサイズ:15px
    }
} 
@media スクリーンと (最小幅:640px) と (最大幅:719px) {
    html{
        フォントサイズ:20px
    }
} 
@media スクリーンと (最小幅:720px) と (最大幅:749px) {
    html{
        フォントサイズ:22.5px
    }
} 
@media スクリーンと (最小幅:750px) と (最大幅:799px) {
    html{
        フォントサイズ:23.5px
    }
} 
@media スクリーンと (min-width:800px) {
    html{
        フォントサイズ:25px
    }
}

2. remを設定するJSメソッド

ルートフォントサイズはJSを使用して設定されるため、レンダリングが完了した後に変更が発生すると、リフローが発生し、フラッシュ画面が発生します。したがって、この方法を使用する場合は、JS コードをヘッド内に、CSS が導入される前に配置する必要があります。

(関数 (doc, win) {
  var docEl = doc.documentElement、
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    再計算 = 関数 () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) 戻り値:
      docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    };
  再計算(); 
  doc.addEventListener の場合、戻り値は次のようになります。
  win.addEventListener(resizeEvt、recalc、false);
})(ドキュメント、ウィンドウ);

上記において、clientWidth は実際の画面幅、375 はデザインの基準となる参照画面幅、20 は実際の画面幅が参照画面幅と等しい場合の 1rem のサイズです。コードのキーパラメータ 20 と 375 は次のように設定されています。

a) 提供されているデザイン案は基本的にiPhone 6/7/8を基準にしており、幅750px、dpr2となっているため、remを計算する際の基準画面幅は375に設定できます。

b) Chromeの最小フォントサイズは12pxなので、計算の便宜上、1remのサイズは20pxに設定できます。
申請プロセス中に、たとえば、750 のデザイン案を取得した場合、まず、デザイン案の値を 2 で割って、携帯電話の画面のサイズに応じたレイアウトの値を取得します (これが 375 の由来でもあります)。次に、20 で割って、デザイン案の px を rem に変換します。

3. メディアに関するお問い合わせ

使用シナリオ: メディアクエリは通常、次のような特別な処理に使用されます。

1. iPhoneXなどのフルスクリーンデバイスへの適応

2. iPhone Plusなどの超大型画面や、DPR 3のパッドの横画面に適応する場合は、業務ニーズに応じて臨界値を設定して、異なるコンテンツを表示したり、異なる解像度の画像を置き換えたり（つまり、2倍の画像と3倍の画像の使用）する必要があります。

4. ウ、ウ

vwは画面の幅に基づいたパーセンテージ単位です。1vw=1% * deviceWidth

vhは画面の高さに基づくパーセンテージ単位です。1v=1% * deviceHeight

vw と vh は確かに非常に便利ですが、使用時には互換性の問題を考慮する必要があります。一部の国産携帯電話 (Huawei など) に付属するブラウザーでは失敗し、X5 カーネルを使用する場合には問題が発生しやすいと言われています。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: CSS を使用して、画像に 3D の凸型と凹型のエフェクト (フレーム外に凸型、またはフレーム内に凹型) を実現します。

>>: タブ切り替えを実装するための HTML サンプルコード