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

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 のドロップダウン ボックスのセカンダリ リンク効果を実装するためのサンプル コード

推薦する

MySQL 8.0.16 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16圧縮パッケージのインストールと設定方法を参考までに紹介します。...

CSS でショートカット プロパティを記述する際は、トラブルの順序に注意してください (落とし穴を避けるため)

ショートハンドプロパティは、複数のプロパティに同時に値を割り当てるために使用されます。たとえば、fo...

Vue Routerはバックグラウンドデータに応じて異なるコンポーネントをロードします

目次実際のプロジェクトで遭遇する要件実装が間違っているところもある私は個人的に、実装するより良い方法...

Tomcatの起動が遅い問題を素早く解決、超簡単

今日、私はクラスメートが問題を解決するのを手伝いました - Tomcat の起動が非常に遅く、約 5...

セマンティック XHTML タグの紹介

まず最初に指摘しておきたいのは、人間は視覚的な区分を通じてコン​​テンツの意味を判断できるが、検索エ...

MySQLデータベースの数千万件のデータクエリとストレージの詳細な説明

目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...

Linux で指定された期間に数分ごとにタスク スケジュール crontab を自動的に実行する方法

まずコードを見てみましょう #/bin/sh datename=$(日付 +%Y%m%d-%H%M%...

MySQL 学習ノート: 完全な SELECT ステートメントの使用例と詳細な説明

この記事では、MySQL 学習ノートの select ステートメントの完全な使用方法を例を使用して説...

CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...

見落としがちなVue.jsのAPIを詳しく解説

目次次のチェックv-model 構文シュガー.sync 修飾子$セット計算プロパティセット要約する次...

MySQL ユーザーのホスト属性を素早く変更する方法

MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...

Linux での Firewalld の高度な設定の使用に関する詳細な説明

IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...

Linux での MySQL 5.7.16 無料インストール バージョンのグラフィック チュートリアル

この記事では、参考までにMySQL 5.7.16の無料インストール版のチュートリアルを紹介します。具...

Dapr を使用してマイクロサービスをゼロから簡素化する例

目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...