1回答

好帮手慕慕子

2022-03-20

同学你好，可以结合lib-flexible实现移动端适配，然后结合postcss-px2rem-exclude 将vue文件中的px自动转成rem。

示例：

1、安装lib-flexible

npm install lib-flexible --save

2、在项目的入口main.js文件中引入lib-flexible

import 'lib-flexible'

注意：lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，

检查一下html文件的head中，如果有 meta name="viewport"标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果

同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是1920px，此时1rem应该等于192px。假如量的某个元素的宽度是50px，那么在css里面定义这个元素的宽度就是 width: 0.2604166666666667rem

如果每次从设计稿量出来的尺寸都手动去计算一下rem，会导致效率比较慢，还有可能会计算错误，所以我们可以使用postcss-px2rem-exclude自动将css中的px转成rem，步骤如下：

1、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude -D

2、配置 postcss-px2rem-exclude

在项目的根目录下找到文件postcss.config.js，如果没有，新建个，在里面添加如下代码

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 192,  // 1rem对应的值，同学描述设计稿宽度是1920，那么以此为基准，1rem = 1920 / 10  = 192
      exclude: /node_modules|floder_name/i    //忽略node_modules目录下的文件
    }
  }
};

测试下，设置元素为50px

当改变屏幕宽度时，元素大小也会自动跟着改变。不过，实际开发中，设计稿宽度一般都是以750px为准，目前学习阶段，推荐同学直接参考老师的讲解去实现，等完全掌握了视频讲解的内容后，再去拓展其他功能，这样对自己的学习会更有帮助哦。

祝学习愉快~

0