rem をモバイルデバイスに適応させる方法の例

序文

モバイル端末のREM適応ソリューションのレビューと概要

remの使い方

rem 単位の計算は、HTML のルートノードのフォントサイズを参照します。ルートノードのフォントが変更されると、レイアウトによって参照される rem ページもそれに応じて拡大縮小されます。これが rem レイアウトの本質です。

1. HTMLのフォントサイズの値を動的に変更する

ほぼすべてのブラウザは HTML のフォントサイズを 16px に初期化します。動的に変更したい場合は、rem によって適応されたルートノードのフォントサイズの初期値として 16px を一時的に設定できます。

では、動的な変更にはどのように適応すればよいのでしょうか?

デザインの幅が 750 ピクセルであると仮定し、レイアウトに 1rem = 16 ピクセルの単位を使用するように定義しますが、どのように適応すればよいでしょうか?

Chrome 上の iPhone シミュレーターの幅は 375px で、これはデザイン案のちょうど半分です。暗算すると、そのときの 1rem は初期化時の HTML ノードのフォントサイズの半分、つまり newFontSize = 16/2 = 8px に等しいはずです。半分ずつに適合しているのではないでしょうか。

ここから、デザインドラフトの幅 / 16 px = 適応するデバイスの幅 / 8 px という式が得られます。新しいフォントサイズは、現在のデバイスの幅と元のデザインドラフトの幅に基づいて比例して拡大縮小されることがわかります。

最後に、newFontSize = 16px * 適応するデバイスの幅 / 元のデザインの幅

(関数(doc, win) {
  var resizeEvt =
      ウィンドウ内の「orientationchange」?「orientationchange」:「resize」、
    setRemResponse = 関数() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = 新しいフォントサイズ + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt、setRemResponse、false);
})(ドキュメント、ウィンドウ);

2. 実際の使用

測定されたbtnボタンスタイルをpxからremに変換する

.btn{
  幅: 699px; /* 699/16 => 43.6875rem; */
  高さ: 90px; /* 90/16px => 5.625rem; */
  背景: rgba(90, 173, 246, 1);
  境界線の半径: 6px; /* 6/16=> 0.375rem; */
}

計算が面倒すぎるので、計算処理の代わりにscssを使って関数を定義します。

@function pxToRem($initialStyle) {
  @return $initialStyle/16 * 1rem;
}

上記の CSS は次のように書き換えられます。

.btn{
  幅: pxToRem(699);
  高さ:pxToRem(90);
  背景: rgba(90, 173, 246, 1);
  境界線の半径:pxToRem(6);
}

補足: vscodeのプラグインcssremは、css、scssに入力したpxをrem単位に変換する計算をサポートしています。デフォルトのフォントサイズは16pxに設定されています。

計算方法の変更、暗算の残余

1. 簡単な分析

前のセクションを分析すると、最終的にnewFontSize = 16px * 適応するデバイスの幅 / 元のデザインの幅が得られます。

計算するたびに 16 で割るのは非常に面倒です。初期の HTML ルートノードの font-size を計算しやすいように変更すると、最終的には除数として機能するため、どのような値になるでしょうか。100 の方が便利ですか。それは正しい！

定数 oHtml = document.documentElement;
定数 clientWidth = oHtml.clientWidth;
var vM = 750;
var vfontSize = 100;
// モバイルデバイス oHtml.style.fontSize = (vfontSize * clientWidth) / vM + "px";

2. 実際の使用

引き続き、上記の使い慣れたボタンを使用して、px を rem に変換し、結果を頭の中で計算します。

.btn{
  幅: 699px; /* 699/100 => 6.99rem; */
  高さ: 90px; /* 90/100 => 0.9rem; */
  背景: rgba(90, 173, 246, 1);
  境界線の半径: 6px; /* 6/100=> 0.06rem; */
}

正直に言うと、scss があると本当に便利です!

@function を100倍に減らす($initialStyle) {
  @return $initialStyle/100 * 1rem;
}

上記の CSS 関数メソッドは次のように書き換えられます。

.btn{
  幅: 縮小100(699);
  高さ:縮小100(90);
  背景: rgba(90, 173, 246, 1);
  境界線の半径:縮小100(6);
}

どうですか、レムはそんなに簡単なんですね！！！

ユーティリティ関数

上記のどちらの方法も選択できます。結局のところ、JavaScript の実行効率は悪くありません!

(関数(doc, win) {
  var resizeEvt =
      ウィンドウ内の「orientationchange」?「orientationchange」:「resize」、
    setRemResponse = 関数() {
      var vM = 750;
      var vfontSize = 16;
      var html = doc.documentElement;
      var newfontSize = (vfontSize * html.clientWidth) / vM;
      html.style.fontSize = 新しいフォントサイズ + "px";
    };
  doc.addEventListener("DOMContentLoaded", setRemResponse, false);
  win.addEventListener(resizeEvt、setRemResponse、false);
})(ドキュメント、ウィンドウ);

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

<<: Dockerコンテナの中国語言語パックの設定の問題を解決する

>>: Vue のドロップダウンボックスのセカンダリリンク効果を実装するためのサンプルコード