解决前端rem在某些机器上适配不正确的方法

最新推荐文章于 2024-06-22 15:10:18 发布

一意估行

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量132

点赞数

文章标签：前端 javascript 开发语言

原文链接：https://www.jianshu.com/p/2c6a3249dfcd

版权


/**

*

* @authors zhouzexin@baidu.com

* @date 2016-08-20 18:00:04

* @version 1.0.0.1

*/

;(function (win) {

var doc = win.document;

var docEl = doc.documentElement;

var tid;

// 获取样式值

function getStyle(dom, attr) {

if (window.getComputedStyle) {

return window.getComputedStyle(dom, null)[attr];

} else {

return dom.currentStyle[attr];

}

}

// 处理不规则的rem计算

function fixFontSize(width, rem, html) {

var body = doc.getElementsByTagName('body')[0];

body.style.width = '10rem';

var scale = 1;

var bodyWidth = parseInt(getStyle(body, 'width'));

if (bodyWidth != width) {

scale = width / bodyWidth;

rem = rem * scale;

docEl.style.fontSize = rem + 'px';

}

body.style.width = '100%';

}

//计算root元素的字体大小

function refreshRem() {

var html = document.getElementsByTagName('html')[0];

var width = parseInt(getStyle(html, 'width'));

if (width > 768) { // 最大宽度

width = 768;

}

var rem = width / 10; // 将屏幕宽度分成10份， 1份为1rem

docEl.style.fontSize = rem + 'px';

fixFontSize(width, rem);

}

win.addEventListener('resize', function () {

clearTimeout(tid);

tid = setTimeout(refreshRem, 300);

}, false);

win.addEventListener('pageshow', function (e) {

if (e.persisted) {

clearTimeout(tid);

tid = setTimeout(refreshRem, 300);

}

}, false);

refreshRem();

})(window);

适配一些异类机型

转自：https://www.jianshu.com/p/2c6a3249dfcd