当前位置： 移动技术网 > IT编程>网页制作>HTML > 使用vant的移动端REM适配方法

使用vant的移动端REM适配方法

2020年07月17日  | 移动技术网IT编程  | 我要评论

移动端项目，它需要去适配不同的手机屏幕。我们希望实现适配的效果是：与屏幕大小相关。以按钮为例：在大屏手机，按钮的宽高都大些，在小屏手机上尺寸小些。

技术手段：

  • 把所有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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网