1.amfe-flexible
amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。

2.postcss-pxtorem
postcss-pxtorem是postcss的插件,用于将像素单元生成rem单位。

3.移动端适配方案
vue实现移动端适配步骤如下:

先安装amfe-flexible和postcss-pxtorem
npm install amfe-flexible --save
npm install postcss-pxtorem --save
在main.js导入amfe-flexible

// 适配
import 'amfe-flexible';
import 'amfe-flexible/index.js';

配置postcss-pxtorem,可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置,权重从左到右降低,没有则新建文件,只需要设置其中一个即可。

在.postcssrc.js中配置如下:

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['last 15 versions'],
      browsers: ['Android >= 4.0', 'iOS >= 7', 'ie >= 10'],
    },
    'postcss-pxtorem': {
      rootValue: 192,
      propList: ['*'], //属性的选择器,*表示通用
      selectorBlackList: [], //忽略的选择器
    },
  },
};


rootValue根据设计稿宽度除以10进行设置,这边假设设计稿为1920,即rootValue设为192;
propList是设置需要转换的属性,这边*为所有都进行转换。
4.测试结果
css中设置某类宽度为375px:

.content{
  width:375px;
}

运行后在浏览器可以发现已经转化为10rem,即192/设置的rootValue:

以上情况则说明postcss-pxtorem配置成功。

当我们在f12中切换设备时可发现:

html的字体大小跟随设备宽度进行改变,body跟随设备的dpr进行改变,这是amfe-flexible的实现,即说明配置成功。

Logo

前往低代码交流专区

更多推荐