rem 移动端自适应 vue vant postcss-pxtorem lib-flexible

rem 移动端自适应 移动端适配

在用 vue cli3.x 写项目的过程中,遇到了一些问题,当我 用 Vant 框架时,官方文档提示说 Vant的样式默认使用 px 作单位,如果使用 rem 的话,推荐使用以下两个工具:
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 是一款 postcss 插件,用于将单位转化为 rem
Vant 还提供了一份 postcss 配置。
module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};
按照上述代码的确可以实现移动端自适应,可是 rootValue 37.5的值是按照 750设计稿的一半来实现的,也就是说 37.5 会让 第三方 UI 框架 1:1还原,但是这样违背了初衷,你拿到 750 的设计稿,不能直接写原标注尺寸,要将值先除以 2 在写值(100的px,要写50px)。而且这个计算还是在 dpr=1 的死值情况下,我们用的 lib-flexible 插件会动态计算这个值,那样的 vant UI 组件会很不好控制 ,而且 37.5 这个基准值就不是很适合了。如果你不希望修改 第三方 UI 框架,那么改以下配置:

一、安装 lib-flexible

该插件是手淘的一种可伸缩布局方案。
npm i amfe-flexible -S // 缩写
npm install amfe-flexible --save
然后在main.js中导入此模块。
import 'amfe-flexible/index'

二、安装 postcss-pxtorem

可以将 px 单位自动转换为 rem。
npm i postcss-pxtorem -D // 缩写
npm install postcss-pxtorem --save-dev

三、修改 meta 标签头

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

四、添加 .postcssrc.js

如果脚手架工具没有创建这个 .postcssrc.js 文件,那就在根目录下新建.postcssrc.js,并添加以下配置。
module.exports = {
  "plugins": {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*', '!font-size'],
      exclude: /node_modules|folder_name/i
    }
  }
}
rootVale 改为 75 我们可以直接写 750 设计稿的原 px 单位。然后添加 exclude 忽略掉引入的 UI 框架,还可以添加 propList 可以不转换你所希望的值,比如 'font-size',要添加多个以逗号隔开。

bingo

posted @   地灵  阅读(676)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示