使用vant的移动端REM适配方法
程序员文章站
2022-07-03 21:10:29
移动端项目,它需要去适配不同的手机屏幕。我们希望实现适配的效果是:与屏幕大小相关。以按钮为例:在大屏手机,按钮的宽高都大些,在小屏手机上尺寸小些。技术手段:把所有px单位改成rem根据不同的手机屏幕的宽度,来动态设置rem的参考值:html标签上的font-size的大小。地址Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具一起工作,来达到目标。postcss-pxtorem 是一款 postcss 插件,用于将px转化为 rem它需要设置在开发依赖...
移动端项目,它需要去适配不同的手机屏幕。我们希望实现适配的效果是:与屏幕大小相关。以按钮为例:在大屏手机,按钮的宽高都大些,在小屏手机上尺寸小些。
技术手段:
- 把所有px单位改成rem
- 根据不同的手机屏幕的宽度,来动态设置rem的参考值:html标签上的font-size的大小。
Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具一起工作,来达到目标。
-
postcss-pxtorem 是一款 postcss 插件,用于将px转化为 rem
- 它需要设置在开发依赖
-
lib-flexible用于设置 rem 基准值
- 它对应的包名不是这个名字。
- 它需要是生产依赖
安装包
npm i postcss-pxtorem -D
npm i amfe-flexible
设置postcss
修改根目录下的postcss.config.js 文件(如果没有这个文件,可以手动添加一份)
module.exports = {
plugins: {
'autoprefixer': {},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
这一步完成之后,它会把原来样式中的px单位自动转成rem单位。
如果没有生效,重启一下项目npm run serve
。
引入flexible
在入口文件main.js导入 amfe-flexible
// 它会根据的手机尺寸来调整rem的基准值:html标签上的font-size。
import 'amfe-flexible'
本文地址:https://blog.csdn.net/qq_38090109/article/details/107396070
上一篇: iOS项目——项目开发环境搭建
下一篇: 小程序按钮设置分离操作