@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* 动态设置rem
|
||||
*/
|
||||
|
||||
var BASE_SIZE = 20; // 基本字体大小
|
||||
var MAX_SIZE = 50; // 最大字体大小
|
||||
var DESIGN_WIDTH = 720; // iphone 6
|
||||
var MIN_DESIGN_WIDTH = 320;
|
||||
var htmlEl = document.querySelector('html');
|
||||
var fontSize = 20;
|
||||
|
||||
var setFontSize = function (size) {
|
||||
htmlEl.style.fontSize = size + 'px';
|
||||
fontSize = size;
|
||||
};
|
||||
|
||||
var calc = function () {
|
||||
var device_width = document.body.clientWidth || window.innerWidth;
|
||||
var scale = device_width / DESIGN_WIDTH;
|
||||
var distSize = scale * BASE_SIZE;
|
||||
if (distSize > MAX_SIZE) {
|
||||
distSize = MAX_SIZE;
|
||||
}
|
||||
if (device_width < MIN_DESIGN_WIDTH) return;
|
||||
setFontSize(Math.round(distSize));
|
||||
};
|
||||
|
||||
window.addEventListener('resize', calc);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', calc);
|
||||
|
||||
window.rem = function (size) {
|
||||
return size / BASE_SIZE + 'rem';
|
||||
};
|
||||
|
||||
window.renderPx = function (size) {
|
||||
return Math.round((size / BASE_SIZE) * fontSize);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user