点击上方“前端小苑”,选择“置顶公众号”
精品技术文章,热门资讯第一时间送
还在为移动端适配而纠结吗?今天为大家分享一个移动端适配神器——postcss-px-to-viewport。阅读愉快!
正文从这里开始:
从古老的的百分比布局+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端也许有点差强人意,但手机上基本可以放心使用了。(顺带吐槽一下浏览器兼容性真是阻碍技术发展的碍脚石)
原文作者: 闲云一鹤
文章来源:掘金
原文地址:https://juejin.im/post/5cf0d8fb6fb9a07ee9585681
更多精选文章
vue 组件通信看这篇就够了(12种通信方式)
vue3.0抢先看(附尤雨溪vue分享ppt)
JS是世界上最好的语言—— 使用Electron开发桌面应用(一)
轻松搞定时间复杂度
你能找到心仪的妹子吗?- 时间复杂度进阶
深入vue - 源码目录及构建过程分析
深入vue -- Virtual Dom是如何被创建的
不仅仅是算法--二分查找(binary search)的心路历程
Node+GitLab实现小程序CI系统
还在手动维护项目的更新日志吗?那你就OUT了!
小程序第三方框架对比 ( wepy / mpvue / taro )
点击“阅读原文”,查看更多精品文章
点一下你会更好看耶