vue-cli4 通过 amfe-flexible+postcss-pxtorem 实现rem自适应布局

网上找了很多cli4 rem适配的方案,有lib-flexible+postcss-pxtorem和lib-flexible+postcss-px2rem的方案实现,但是好像lib-flexible已经弃用,改用amfe-flexible了,而且我也搞不清pstcss-px2rem和postcss-pxtorem的区别(我太菜了,求大佬们在评论区解答)。既然有一种方法可以用,就写下来当个笔记也是一个学习的过程。

1. 安装 amfe-flexible

npm install --save amfe-flexible       // 安装命令

安装完成后,在package.json中会显示该依赖

2. 在项目入口文件main.js中引入 amfe-flexible

import 'amfe-flexible'

3. 添加meta标签

在首页中(项目中-public-index.html)中添加以下meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.  安装postcss-pxtorem插件

postcss-pxtorem可以将px单位自动转换为rem单位,可以让开发人员直接按照设计图进行布局,不需要担心样式尺寸不对的问题。

cnpm install postcss-pxtorem@5.1.1 -D 

 遇到的问题

之所以安装的命令不是npm install postcss-pxtorem -D,是因为默认的安装方式安装后好像版本过高,会在npm run serve的时候出现报错,截止到2021.10.4通过这个指令安装上的postcss-pxtorem版本为6.0,但是提示需要8.0以上的版本?如下图,解决方案就是安装5.1.1的指定版本,求解答这个问题的真正解决方案

5. 配置postcss-pxtorem

在安装postcss-pxtorem的时候会生成一个文件.postcssrc.js

如果没生成请手动创建

在.postcssrc.js文件中进行如下配置

module.exports = {
  "plugins": {
    // 兼容浏览器,添加前缀
    "autoprefixer": {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      rootValue:75, // 适配的尺寸 75为750 375为37.5...
      propList: ["*"], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']
      unitPrecision: 6, //保留rem小数点多少位
      selectorBlackList: ['.van'],  //则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法。
      replace: true,
      mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
      minPixelValue: 2, //px小于2的不会被转换
    },
    // "postcss-import": {},
    // "postcss-url": {},


  }
}

 6. 配置完后npm run serve 在各尺寸下查看是否生效

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
amfe-flexible是一个用于移动端适配库,它可以根据设备的屏幕宽度动态设置html的font-size值,从而实现页面的自适应。而postcss-px-to-viewport是一个PostCSS插件,它可以将px单位转换为vw或者vh单位,以实现移动端页面的适配。 使用amfe-flexiblepostcss-px-to-viewport配合使用的步骤如下: 1. 安装amfe-flexiblepostcss-px-to-viewport: ``` npm install amfe-flexible postcss-px-to-viewport --save-dev ``` 2. 在项目的入口文件中引入amfe-flexible: ```javascript import 'amfe-flexible'; ``` 3. 在项目的构建工具中配置postcss-px-to-viewport插件。以webpack为例,需要在webpack配置文件中添加以下代码: ```javascript const px2vw = require('postcss-px-to-viewport'); module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ // ... { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ px2vw({ viewportWidth: 750, // 设计稿的宽度 unitPrecision: 5, // 转换后的小数位数 viewportUnit: 'vw', // 转换的单位 selectorBlackList: [], // 需要忽略的选择器 minPixelValue: 1, // 最小的转换数值 mediaQuery: false // 是否转换媒体查询中的px }) ] } } } ] } ] } }; ``` 4. 在样式文件中使用px单位进行开发,插件会自动将其转换为vw或者vh单位。 通过以上步骤,amfe-flexible会根据设备的屏幕宽度动态设置html的font-size值,而postcss-px-to-viewport插件会将样式文件中的px单位转换为vw或者vh单位,从而实现移动端页面的适配。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值