移动端适配方案及不同单位区别

最新推荐文章于 2024-06-10 20:36:00 发布

sjisoklsl

最新推荐文章于 2024-06-10 20:36:00 发布

阅读量180

点赞数

文章标签： javascript 前端 ui

本文链接：https://blog.csdn.net/sjisoklsl/article/details/129782941

版权

本文介绍了移动端适配的重要性，并探讨了rem和vw/vh两种流行的适配方案，重点讲解了rem的实现步骤。同时，详细解释了px、em、%、vw、vh、vmax和vmin等单位的区别，帮助理解它们在不同场景下的应用。

摘要由CSDN通过智能技术生成

1.为什么要进行移动端适配？

移动端设备的尺寸很多，而UI设计稿一般只会基于一个尺寸（一般是750px）进行设计。假如开发人员完全基于该设计稿进行开发，就会出现一种现象，在不同尺寸的设备上，页面的展示效果各不相同，甚至可能出现布局错乱或者出现横向滚动条等情况。因此，开发人员就需要考虑如何让页面内容能够自适应设备尺寸，在设备尺寸较大时内容大一些，设备尺寸小的时候内容也能缩小，让页面在不同的设备尺寸下尽量呈现一致的展示效果。
移动端适配方案

目前流行的移动端适配方案有两种，rem 和 vw/vh(viewport)，由于 viewport 单位得到众多浏览器的兼容，现在更多的人推荐使用 viewport 方案来解决移动端适配问题。下面将对这两个方案做一个大致的介绍。
注意了，（面试题）移动端适配的解决方案必考！

rem方案：
2.什么是rem

rem是一个相对于页面根元素html的font-size的一个单位，举个例子，假如设置了根元素html的font-size为18px，那么，1rem 等于 18px。由此可知，rem的大小是会随着根元素html的font-size的改变而改变的。rem方案就是利用了这一点，根据不同的屏幕尺寸，来设置不同的根元素html的font-size的大小，以此来达到适配不同屏幕尺寸的目的。
rem方案实现步骤总结

// 安装插件
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
2、在main.js中引入amfe-flexible

import 'amfe-flexibl