iPhone 6設計原稿に基づいて、rem値を動的に計算します.
1238 ワード
rem
単位は、モバイル端末のh 5開発をする時に最もよく使う単位です.適応された問題を解決するためには、文書の更なるノードに対して動的にfont-size
値を追加する必要がある.mediaquery
を使用してこの問題を解決することができますが、各ファイルは一列のfont-size
値を参照するのが煩雑で、値も連続的な効果を達成することができません.文書にjs動的計算を用いた
fopnt-size
動的割当値について問題を解決した.使用する場合は、下のコードをページの上部(headラベル内)に置いてください.
/**
* [ iPhone6 js rem ]
* @param {[type]} currClientWidth [ ]
* @param {[type]} fontValue [ fontvalue ]
* @return {[type]} [description]
*/
var currClientWidth, fontValue,originWidth;
//originWidth ( Iphone 6 )
originWidth=375;
__resize();
// resize
window.addEventListener('resize', __resize, false);
function __resize() {
currClientWidth = document.documentElement.clientWidth;
//
if (currClientWidth > 640) currClientWidth = 640;
if (currClientWidth < 320) currClientWidth = 320;
//
fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
document.documentElement.style.fontSize = fontValue + '%';
}
転載先:https://www.cnblogs.com/yisuowushinian/p/5107853.html