移动端适配REM、vw、vh、媒体查询@media以及flexible.js的作用

中枢叹号

已于 2023-01-30 18:49:07 修改

阅读量963

点赞数

文章标签： html 前端

于 2023-01-29 19:24:18 首次发布

本文链接：https://blog.youkuaiyun.com/NewHouser/article/details/127984411

版权

本文介绍了移动端适配的方法，包括使用rem进行页面元素等比缩放，通过媒体查询@media设置差异化CSS样式，以及vw/vh单位的自动适配。详细阐述了rem适配的流程，解释了vw/vh与rem的区别，并讨论了在不同设备间如何进行有效适配。此外，提到了flexible.js在多设备适配中的应用。

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

1、rem 适配

适配的网页效果就是根据移动设备的屏幕大小实现网页元素的等比缩放

rem 是相对单位，是相对于HTML标签的字号计算结果，而HTML标签的字号也叫做根字号，或HTML字号

1 rem = 1 HTML字号大小

使用rem单位前提时保证有根字号

使用rem开发的流程：

1、设置HTML根字号

2、使用rem单位设置尺寸

2、当需要设置差异化CSS样式的时候，可以使用媒体查询@media

使用方法：

@media(决定条件){

CSS样式……

}

示例如下：

    <style>
        @media(width:375px) {
            html {
                font-size: 20px;
            }
        }
        
        @media(width:414px) {
            html {
                font-size: 30px;
            }
        }
        
        div {
            width: 2rem;
            height: 3rem;
            background-color: red;
        }
    </style>

释义：如上@media的决定条件为视口的宽度，不同的设备屏幕尺寸是不一样的，所以页面元素需要根据不同的屏幕尺寸进行自适应调整。

由上述代码可知，当视口宽度为375px时，HTML（根字号）为20px，div的宽为40px（2rem=2 * 20px），高为60px（3rem=3 * 20px）；当视口宽度为414px时，HTML（根字号）为30px，div的宽为60px（2rem=2 * 30px），高为90px（3rem=3 * 30px）。

上述代码使用的视口宽度为移动设备的宽度，如图：

在使用rem适配移动端的时候的时候，根字号的取值有一定的讲究，尽量不能像上述代码一样随便写成20、30px，而是将视口宽度等分，为了便于计算，通常将宽度等分为10份，例如：iPhone SE的视口宽度为375px，则根字号设置为37.5px（375/10）

拓展：

问：iPad Air 的视口宽度为820，根字号为82px，界面中有一元素的宽为300px，高为400px，那么设置成rem适配，则该元素的宽为多少rem，高为多少rem（保留3位小数）？

答：宽为 300/82=3.659rem 高为 400/82=4.878rem

提问：如果只有两三个设备需要适配，可以用@media依次设置，如果需要适配的设备有很多，屏幕大小都不一样，还需要用@mdeia一个一个写出来吗？

在实际开发中，可以使用 flexible.js 来实现多个媒体查询的适配，只需要将 flexible.js 文件引入到目标文件（html文件）中即可。如下：

<body>
    ...
    
    <script src="../../flexible.js"></script>
    //路径为实际存放flexible.js的地方，不以此为准
</body>

flexible.js文件可自行搜索下载，C站已经有这个资源了，所以我上传不了

3、vw/vh 适配

vw：默认为视口宽度的1/100

vh：默认为视口高度的1/100

vw/vh 与 rem 的区别在于，后者需要依赖于HTML根字号，而vw/vh则较为简单，会根据设备的不同自动适配，可以直接使用，例如：

div{
    width:20vw;
    height:30vw;
}

假设以上图中 iPhone SE 的视口参数为参照，1vw = 3.75px ；1vh = 6.67px，那么20vw=75px ； 30vw=112.5px

拓展：

问：iPad Air 的视口宽度为820，界面中有一元素的宽为300px，高为400px，那么设置成vw/vh适配，则该元素的宽为多少vw/vh，高为多少vw/vh（保留2位小数）？

答：宽为 300/8.2=36.59vw 高为 400/8.2=48.78rem

在less文件中可以直接写成（300 / 8.2vw）（400 / 8.2vw）

（less语法：https://blog.youkuaiyun.com/NewHouser/article/details/128800005?spm=1001.2014.3001.5501）

注意：尽量设置的宽高单位要么都是vw，要么都是vh