移动端快速适配方法

amfe-flexible

• 该插件将网页平均分成10等份，然后设置html跟标签的font-size

postcss-px2rem

• 该插件将我们经常使用的px转换成rem
• 转换方法是rem = px /（我们设置的值）
• 例如我们设置的单位是37.5，设置div的宽度为75px，则换算后为2rem

使用方法

	npm i amfe-flexible postcss-px2rem

 
 

 
 

• 安装完成之后，在package.json文件中加入以下代码

  //  name同级
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem": {
        "remUnit": 37.5
      }
    }
  }

 
 

• 在main.js中引入amfe-flexible

	import 'amfe-flexible'

 
 

 
 

效果图

<template>
  <div class="about">
    <div class="box"></div>
  </div>
</template>
<script>
  export default {
    mounted() {
    }
  }
</script>
<style lang="scss">
.box {
  width: 375px;
  height: 375px;
  background: rgba(0, 0, 0, .5);
}
</style>