rem布局

原创于 2020-05-14 18:49:55 发布 · 193 阅读

1 ·

CC 4.0 BY-SA版权

vue企业级开发规范专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种基于REM单位的自适应布局方案，通过修改HTML根元素大小使页面元素随屏幕尺寸变化而调整，实现响应式设计。文章详细解释了原理，并提供了具体的JS实现代码，便于开发者快速应用。

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

原理:通过修改html根元素的大小,使得整体元素大小使得改变

1、创建js文件
	(function(){

    function resize()
    {
        let baseFontSize=100;  //设计稿100像素相当于1rem,满屏就算7.5rem
        let designWidth=750;

        let width=window.innerWidth; //屏幕宽度
        
        //750/100,等到整个屏幕整体的rem,屏幕的像素/整体rem,得到每个rem对应的px
        let currentFontSize=(width/designWidth)*100;

        document.documentElement.style.fontSize=currentFontSize+'px';

    }

   //当屏幕发送变化修改字体大小
   window.onresize=function(){

    resize();

   } 

   //监听文档载入完毕事件,修改字体大小
   document.addEventListener('DOMContent',resize);

})()

2、使用
在main.js中引入该文件即可