适配方案rem和vw/vh

最新推荐文章于 2025-08-26 14:55:58 发布

原创最新推荐文章于 2025-08-26 14:55:58 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了移动端适配的两种常见方案：rem和vw/vh。rem适配结合媒体查询实现元素尺寸适配，通过flexible.js简化流程；vw/vh作为视口相对单位，提供了更简单的响应式设计。介绍了如何将px转换为rem和vw，以及它们在不同场景下的应用。

适配方案 rem和vw/vh

移动端的适配方案：

flex + rem单位做适配效果（比如淘宝和小米移动端）当前市场最多
flex + viewport width /vh单位做适配效果（比如 B站移动端）新兴，马上的一个趋势

让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕

rem适配

rem单位

rem 是一个相对单位，相对于html的字号大小,1rem 就是 html 文字的大小

比如

html {
    font-size: 35px;
}

媒体查询

媒体查询 mediaquery 可以自动检测视口的宽度。

媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。

使用媒体查询, 根据不同的视口宽度, 设置不同的根字号，就完成了适配

语法：

@media (width:375px) {
    html {
        font-size: 40px;
    }
}

@media (width:320px) {
    html {
        font-size: 30px;
    }
}

综合：

@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media (width:414px) {
    html {
        font-size: 41.4px;
    }
}


.box {
    width: 5rem;
    height: 5rem;
    background-color: pink;
}

通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果

flexible.js

媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。

这个也是值得提倡使用的一种方式。

有了这个js文件，可以帮我们自动检测屏幕宽度，自动修改html文字大小，这样就可以让盒子配合rem完成适配。

flexible.js引入方式,在body结束标签的上面引入

<script src="./js/flexible.js"></script>

把px转换成rem

flexible 能够修改html文字大小，修改文字大小: 当前屏幕 / 10 就是文字大小

例如：当前屏幕 375px，则加了 flexible之后，html文字大小为 37.5px
我们的设计稿里面元素大小是固定的吗？是，而是 px 单位，但是我们开发的时候，要使用 rem 才能适配。
那怎么把我们测量的px 转换为适配的rem呢？

直接使用测量的px值 / 37.5 就是 rem的值

后面我们学习vue开发的时候，所有的单位我们写 px。就足够了。