移动端项目用js控制rem的大小(rem的使用)

NM-BOY

于 2021-10-08 16:38:12 发布

阅读量505

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_42294411/article/details/120652867

该博客介绍了一种JavaScript方法，用于根据设备屏幕宽度动态设置html元素的font-size，从而实现移动端的rem适配。通过监听窗口resize事件和DOMContentLoaded事件，确保在页面加载和窗口尺寸变化时调整字体大小，确保1rem对应于不同屏幕宽度下的适当像素值。这种方法有助于创建响应式布局，适应不同设备的屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//设置根目录font-size,1rem=10px
(function(doc, win) {

    var docEl = doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function() {

            var clientWidth = docEl.clientWidth;

            if (!clientWidth) return;
            if(clientWidth>=750){
                     docEl.style.fontSize = '20px';
                 }else{
                     docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';
                 }
            /*docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';*/

        };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);
	
})(document, window);

直接建一个js文件,把这个复制粘贴进去,屏幕宽度设置为iphoneX,宽度为375px,然后可以看到在控制台里面html的fontsize为10px,这说明已经设置rem成功了,1rem=10px…

这样的话你调整屏幕宽度可以看到控制台里面的font-size是不同的,这样1rem对应的px也是不同的.
1rem就可以适应移动端了.