webpack将px自动转化为rem rem+vw 适配移动端

最新推荐文章于 2025-06-09 09:01:41 发布

kingrome2009

最新推荐文章于 2025-06-09 09:01:41 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/kingrome2017/article/details/81208378

html5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了CSS3中rem和vw单位的特点与应用场景，详细解释了如何利用这两种单位实现响应式设计，特别是在移动设备上的良好适配效果。

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

rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em的区别在于rem相对的是HTML根元素。

export default class Rem {
    static init(){
    	//设置默认尺寸
        Rem.defaultStyle();
        //缩放后，重新计算html字体大小
        Rem.resizeHandler();
        //监听浏览器缩放事件
        window.addEventListener("resize", Rem.resizeHandler);
    }
    //计算html字体大小
    static resizeHandler() {
        let contW = Math.floor(document.documentElement.clientWidth);
        let fontS = (contW / screen.width) * 100;
        document.documentElement.style.fontSize = fontS + "px";
    }
    //设置html默认字体为100px body字体为16px
    static defaultStyle(){
        document.documentElement.style.fontSize = "100px";
        document.body.style.fontSize = "16px";
    }
    //px 转换成 rem
    static getRem(size) {
        var fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
        return size / fontSize;
    }
}

vw/vh方案计算方便，能够很好地实现适配效果，但是存在一定的兼容问题，将vw/vh方案和rem方案相结合，设置html元素的font-size单位为vw，然后在布局中直接使用rem单位。

例如，设计稿的宽度为750px，则1vw=7.5px，为了方便计算，我们将html元素的font-size大小设置为100px，也就是13.333vw=100px。

html{font-size:13.333vw}

设置html{font-size:13.333vw}，在样式代码中1rem=13.333vw=100px，即1rem等于设计稿上的100px，使用的时候除以100，直接小数点向左移动2位，1rem等于100px，那么10px就是0.1rem。

想用相对单位就写rem，想用绝对单位就写px，不需要其他的设置。

这种方案的优点：从rem方案过渡到vw，只是需要通过改变根元素字体大小的计算方式，将单位改成vw，不需要其他处理。

这种方案的缺点：这种方案只对手机的兼容性很好，ipad或者是pc端的效果就不是很好。因为根节点的字体单位使用的是vw，当设备的宽度越来越大时，使用rem做单位的元素也会越来越大，以至于在ipad或者是pc上展示的效果会很差。

解决方案：当屏幕过大的时候，我们可以使用媒体查询来限制根元素的字体大小，实现对页面的最大最小宽度限制。

例如，在样式中加上这句代码，在pc上效果也很不错了。

@media (min-width: 560px) {
  html {
    font-size: 54px;
  }
}