根據iPhone6設計稿動態計算rem值
阿新 • • 發佈:2018-07-13
使用 pan light 屏幕寬度 我們 解決 適應 fixed 連續
rem
單位在做移動端的h5開發的時候是最經常使用的單位。為解決自適應的問題,我們需要動態的給文檔的更節點添加font-size
值。使用mediaquery
可以解決這個問題,但是每一個文件都引用一大串的font-size
值很繁瑣,而且值也不能達到連續的效果。
就使用js動態計算給文檔的fopnt-size
動態賦值解決問題。
使用的時候,請將下面的代碼放到頁面的頂部(head標簽內);
/**
* [以iPhone6的設計稿為例js動態設置文檔 rem 值]
* @param {[type]} currClientWidth [當前客戶端的寬度]
* @param {[type]} fontValue [計算後的 fontvalue值]
* @return {[type]} [description]
*/
<script>
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 + ‘%‘;
}
</script>
根據iPhone6設計稿動態計算rem值