vue项目-h5移动端px适配配置

一、包安装

1、必需

yarn add postcss-pxtorem -D

2、可选

yarn add amfe-flexible

二、配置 index.html

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

<!-- 如果安装了 amfe-flexible 包 -->
<scriptsrc="./node_modules/amfe-flexible/index.js"></script>

<!-- 如果没安装 amfe-flexible 包（其实就是把包的源码抄过来了） -->

<!-- 自动计算，将根元素 font-size 设置为屏幕宽度的 1/10 -->

<script>

!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);

</script>

三、配置 postcss

【这一步很关键，官方README没写】

创建配置文件： postcss.config.js

【配置示例】

module.exports = {

  plugins: {

    'postcss-pxtorem': {

      rootValue: 75, //结果为：设计稿元素尺寸/75，比如元素宽750px,最终页面会换算成 10rem（按750宽设计稿配置）

      propList: ['*'],

      exclude: /node_modules/i,

    },

  },

};

【更多配置】postcss-pxtorem

搞定。