这篇文章给大家分享的是有关rem适配的有几种常用封装的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
一、rem1.js
第一种方法考虑了m端屏幕旋转的问题.对兼容性做出了一定的处理,具体看代码.
计算
安全
数据库
网络和加速
企业服务
export function rem (doc, win) {
let docEl = doc.documentElement;
//考虑以及兼容了 屏幕旋转的事件
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
let recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false); // 屏幕大小以及旋转变化自适应
doc.addEventListener('DOMContentLoaded', recalc, false); // 页面初次打开自适应
recalc();
};二、rem2.js
采用html标签的offsetWidth长度计算,
export function rem() {
var fz = document.querySelector('html').offsetWidth / 7.5; //设计图 750 1rem=100px
document.querySelector('html').style.fontSize =
fz <= 100 ? fz + 'px' : '100px';
window.onresize = function() {
rem();
};
};三、rem3.js
采用window.innerWidth计算,设置了body fontSize防止字体继承,使页面字体过大.
export function rem() {
document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px
document.body.style.fontSize = '14px';// 在body上将字体还原大小，避免页面无样式字体超大
}感谢各位的阅读！关于“rem适配的有几种常用封装”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/web/625054.html
