前几天开发公司产品官网的时候，遇到了一些适配问题，当时选择用postcss-px-to-viewport方案来实现适配，效果也很显著，每个页面都适配到位
step1. vue安装postcss-px-to-viewport插件。
step2. 配置适配插件的参数
使用PostCss配置文件时，在<u>postcss.config.js</u>添加如下配置：
或者在<u>package.json</u>中，添加以下配置：
说明下几个重要参数的使用：
适配存在的问题点：
注：执行指令后在package.json的devDependencies分支可以看到相应的版本，
2. 在main.js中导入lib-fixible.
如果未使用vue的伙伴可以直接在前端中直接使用阿里的CDN，如下：
注：此处是postcss-px2rem而不是px2rem-loader,网上很多文章都引用是后者，会导致在配置时候无法成功配置。
在vue.config.js中配置如下配置即可，如未有此文件请自行搜索查询创建配置。
集成以上两个步骤，基本前端即可根据屏幕自行适配，但可能有部分伙伴会遇到data-dpr始终为1，遇到这个情况多半是因为在html头中自己设置了<meta name="viewport" ...>，
查看lib-flexble做了配置，默认会根据屏幕为我们添加头文件的，如果自行设置，那么只会进行修改设置的值而已，并不会再添加，所以导致data-dpr始终为1，所以把<metaname="viewport" ...>去除.