vue 项目 移动端适配rem 你还在用addEventListener?

最近的移动端项目刚结束，所以做一波小的总结，避免以后自己忘记...........

这次项目做移动端适配，用到两个插件，话不多说上代码

 npm i postcss-px2rem

装好后, 在postcss.config.js 里写入

module.exports = {  plugins: {    autoprefixer: {},    'postcss-px2rem': {      remUnit: 37.5 //这个值看你的ui设计稿尺寸自己设置，我一般都是按这个值来的    }  }};

接下，装另一个插件

npm i amfe-flexible

装好后，在你的main.js引入

import 'amfe-flexible/index.js'

ok，写个小demo 测试一下

<template>  <div class="home">    <div class="ball"></div>    <div></div>  </div></template><script>// @ is an alias to /srcexport default {  name: "home",  data() {    return {};  }};</script><style lang="less" scoped>.ball {  background: yellow;  width: 2rem;  height: 2rem;  border-radius: 50%;}</style>

差点忘了，移动端嘛，有个标签是不可少的，这个标签是要写进index.html

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

好，结束！