携帯端末装置の距離REM

私はあなたが適応に問題が発生したと確信しています携帯端末の開発を行う際に、携帯電話の画面サイズは従来のピクセルの距離単位は、私たちのニーズを満たすことができなかった使用して、カテゴリをたくさん持っているので、REM、それが判明し、彼とローカリゼーションの割合これは、より多くのようなものですが、いくつかの違いがここにもあります共有したいREMをそれらを使用します。

REMは、ユニットの相対的である、彼のサイズは、このような変換ルールのレムPXは次のと私のモバイルウェブページの最後として、あなたの計算に応じて設定することができます。

1 REM = 100 ピクセル

アートワークを設計するために私のUIには標準的な設計の750px幅であるので、最終的にレム変換規則に750px標準の規定に私の携帯電話のウェブページには、次のコードを参照してください。

(function(doc, win) {
  var docEl = doc.documentElement,
  resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
  recalc = function() {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    if (clientWidth > 750) {
      docEl.style.fontSize = "100px"; // 修正一下大于750的字体大小为100px
    } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
    }
    /*
     * 100 -> html,body {  font-size:100px; }
     * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面
     * 根据具体情况改变这两个数值
     */
  };

if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

一般的な原理は、ブラウザウィンドウのサイズ変更は、私はそれが異なる画面サイズの距離単位に適合させることができるように、REM変換規則を再定義するために設定された機能をトリガする場合、ウィンドウのサイズ変更を監視することです。

おすすめ