vue移动端适配

八月 31, 2021 1532

移动端适配一般采用rem方案，在vue里用两个插件就可以实现自适应

1.lib-flexible

1
npm install lib-flexible --save

安装完成了就可以在vue项目使用lib-flexible来解决移动端适配了。

原理：

lib-flexible会自动在html的head中添加一个meta name=”viewport”的标签，同时会自动设置html的font-size为屏幕宽度除以10，1rem又等于html根节点的font-size。假如设计稿的宽度是750px，那么于html根节点的font-size就等于75px，1rem也就等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

注意：

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

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

2.px2rem-loader

1
npm install postcss-px2rem --save-dev

配置：

找到vue.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
css: {
  loaderOptions: {
    postcss: {
      plugins: [
        // require("tailwindcss"), 这行代码是与Tailwind CSS一起使用时加的，如果要与 postcss-px2rem一起使用，这行代码一定要加载上方，不然会报错
        require("autoprefixer"),
        require("postcss-px2rem")({
          remUnit: 37.5,
        }),
      ],
    },
  },
},

只需要配置remUnit这一项，remUnit 这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把remUnit设置为75（设计图宽度的十分之一），这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。

如果你引用像mint-ui这样的第三方UI框架，因为第三方框架没有兼容px2rem
你可以将remUnit的值设置为设计图宽度（这里假设为750px）75的一半 ==> 37.5，即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。

原理：

postcss-px2rem会将项目中的px单位转换为rem单位，配合lib-flexible自动计算rem，可以做到开发按照设计稿1:1还原，插件帮我们自动计算rem值并且将px转为rem单位

注意:

require(“tailwindcss”), 这行代码是与Tailwind CSS一起使用时加的，如果要与 postcss-px2rem一起使用，这行代码一定要加载上方，不然会报错

参考文章
文章1

查看评论