vuecli4里使用rem
首先安装安装两个插件
屏幕自适应插件 npm i amfe-flexible --save
把px转成rem的插件,只能在css文件里面写 里面的 npm i postcss-px2rem --save
package.json中添加如下代码：
"remUnit":75表示 ui小姐姐给的图 是按照750px这个尺寸设计的
注意postcss-px2rem安装如果报错# node.getIterator is not a function
场景:vue搭建移动端页面，main.js引入全局css报错。
原因：用了postcss-px2rem与postcss-px2rem-exclude导致的问题，
解决方法：那么卸载postcss-px2rem安装使用postcss-pxtorem。在postcss.config.js设置如下代码，可以自行更改设置，解决问题。如果没有postcss.config.js就自己创建并且删除之前package.json中代码
再在postcss.config.js文件中写入如下代码
移动端的兼容性问题
一. 华为荣耀3C的原生浏览器问题：
同一行内，存在靠左与靠右的元素时，都必须加上浮动，否则，右浮元素不右浮，影响后续排版。
两个行内元素span元素都要浮动才行。
二. ios safari时间显示问题。
之前设置new Date日期格式的时候，在ios中的safari中发现显示效果与其他浏览器不一致，找了多方面原因，结果是把“-”换成“/”就可以解决了。new Date("year-month-day");只识别new Date("year/month/day");
三. 关于长按识别二维码问题。
安卓设备微信中识别没问题，结果到了ios中识别不了。最终发现是将position设置为fixed，ios的微信中长按会不起作用。要想在ios的微信中实现长按识别二维码，只需确保二维码图片和包住图片的div都没有设置position:fiexd即可。
四. 移动端最小识别rem问题。
移动端相对来说兼容性不是什么问题，但是实际项目中发现，如果采用rem: .01rem;有些机型如：魅蓝note、iphone5等机型的webview中显示不出来。华为荣耀有的设置border的时候，有时0.03rem可以，有时不可以，暂时不明所以。所以还是建议，像border这种属性，移动端可以设置为1px。
五.在移动端图片上传图片兼容低端机的问题。
解决方案:input 加入属性 accept="image/*" multiple
六. 让hybird app中的webview页面看起来更像native。
web相较于native有一个好处就是版本更新比较方便，不会出现native应用商店审核乱七八糟的时间，直接点击app的某个按钮，使用webview打开页面，该页面随意替换都非常方便。最常用的就是活动页面，定期的活动只需要前端开发人员维护即可。但是假如用户长按屏幕的时候出现选中文本的场景，看起来不那么想native，如果有解决这个问题的需求，可使用：
其中Element为任意元素，或者直接将其写入cssReset文件中。
七. 移动端300ms延迟。
300ms尚可接受，不过因为300ms产生的问题，我们必须要解决。300ms导致用户体验并不是很好，解决这个问题，我们一般在移动端用tap事件来取代click事件。推荐两个js，一个是fastclick，一个是tap.js
八. 移动端 HTML5 audio autoplay 失效问题
这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。
九、input为fixed定位，在ios下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出现在中间位置。
解决方案:内容列表框也是fixed定位,这样不会出现fixed错位的问题