【移动端适配】用vw、vh＋媒体查询打造最完美的移动端适配方案

更新——前两天写的这篇文章不曾想能得到这番热烈反响，首先感谢你们的支持与抬爱，菜鸡表示坐卧不安。我也是刚入掘金不久，本意是想在这个有原则的前端社区写点文章，把平时积累多总结。一来有助于督促本身，二是但愿能给有须要的朋友给予帮助。但愿大佬们能多多发表意见或者建议，一块儿成长，进步！望轻拍，感激(ಥ _ ಥ) 一篇真正看了就会用的vw、wh适配教程

从古老的的百分比布局+px+媒体查询到rem布局，一直没找到心仪的移动端适配方案。网上搜索的教程质量也是良莠不齐(要么配置过于繁琐，要么一篇文章处处抄袭)，反正我看完了总有一种无从下手的无奈。所幸，经同事推荐找到一款完美的插件。欣喜之余，以做记录。同时但愿能给须要的朋友提供帮助。

移动端适配神器——postcss-px-to-viewport

这里很少介绍vw、vh属性，毕竟网上一搜一大把，本文章只有最纯粹的干货。只须要经过包管理工具安装postcss-px-to-viewport插件后进行简单配置就能够在页面直接使用px单位，项目编译后自动转换为对应的vw或vh属性

px转vw、vh

1. 在Github搜索 postcss-px-to-viewport

选择星星最多的

英语渣表示看到有中文文档非常兴奋

2. 安装插件

npm install postcss-px-to-viewport --save-dev
复制代码

3. 配置参数

这里以vue cli3.x版本作参考，在package.json中配置

以上，如今代码中使用px就能直接转为对应的vw、vh属性了

经过媒体查询处理边界状况

通常来讲使用px转为vw、vh就能够应付99%的移动端适配了，但偶尔会有个别状况须要使用媒体查询适配小屏分辨率

好比以iphone6为基准布局，看起来毫无问题

但在如iphone5等320像素的分辨率下就会有些瑕疵

明显看到，字体重叠了。这时就能够请出法宝。用媒体查询解决

代码意思是，当用户手机分辨率(宽度)为320像素到340像素之间的时候作兼容处理，下面来看下处理后的效果

完美解决

解决组件库冲突

当咱们在项目中同时引入了postcss-px-to-viewport插件及第三方组件库时会出现样式冲突。既第三方组件库的px单位也被转为了vh，会严重影响组件库的美观，这是咱们不想看到的状况。

下面是有赞组件库的弹窗组件，能够看到组件的px被误转为了vh，弹窗变得又丑又怪。

表面稳如虎，心里慌得一比。赶忙上官方文档看看有木有解决办法(遇到问题首先看文档！看官方文档！)

直觉告诉我“selectorBlackList”能够解决问题， 赶忙在属性里面写上"van"，试试可否过滤匹配

保存并回到页面查看效果

完美解决！

备注

通常组件库的class命名都会带上本身独有的前缀，因此咱们借助此前缀名来进行过滤

总结

至于vw、vh属性的兼容性，从https://caniuse.com/网站给出的数据来看，pc端也许有点差强人意，但手机上基本能够放心使用了。(顺带吐槽一下浏览器兼容性真是阻碍技术发展的碍脚石)