内容简介：一篇真正看了就会用的vw、wh适配教程从古老的的百分比布局+px+媒体查询到rem布局，一直没找到心仪的移动端适配方案。网上搜索的教程质量也是参差不齐(要么配置过于繁琐，要么一篇文章到处抄袭)，反正我看完了总有一种无从下手的无奈。所幸，经同事推荐找到一款完美的插件。欣喜之余，以作记录。同时希望能给需要的朋友提供帮助。这里不多介绍vw、vh属性，毕竟网上一搜一大把，本文章只有最纯粹的干货。只需要通过包管理工具安装postcss-px-to-viewport插件后进行简单配置就可以在页面直接使用px单位，项目编
一篇真正看了就会用的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像素之间的时候做兼容处理，下面来看下处理后的效果
完美解决
以上所述就是小编给大家介绍的《【移动端适配】用vw、vh＋媒体查询打造最完美的移动端适配方案》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
设计原本
Frederick P. Brooks, Jr. / InfoQ中文站、王海鹏、高博 / 机械工业出版社 / 2011-1-1 / 55.00元
无论是软件开发、工程还是建筑，有效的设计都是工作的核心。《设计原本:计算机科学巨匠Frederick P. Brooks的思考》将对设计过程进行深入分析，揭示进行有效和优雅设计的方法。 本书包含了多个行业设计者的特别领悟。Frederick P. Brooks, Jr.精确发现了所有设计项目中内在的不变因素，揭示 了进行优秀设计的过程和模式。通过与几十位优秀设计者的对话，以及他自己在几个设计......一起来看看 《设计原本》 这本书的介绍吧!
