【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案 ╰半夏微凉° 2021-09-19 20:52 564阅读 0赞 > 更新——前两天写的这篇文章未曾想能获得这番热烈反响,首先感谢大家的支持与抬爱,菜鸡表示诚惶诚恐。我也是刚入掘金不久,本意是想在这个有原则的前端社区写点文章,把平时积累多总结。一来有助于督促自己,二是希望能给有需要的朋友给予帮助。希望大佬们能多多发表意见或者建议,一起成长,进步!望轻拍,感激(ಥ \_ ಥ) > 一篇真正看了就会用的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` 选择星星最多的 ![1][] 英语渣表示看到有中文文档很是兴奋 ![1 1][] 2. 安装插件 npm install postcss-px-to-viewport --save-dev 复制代码 3. 配置参数 ![1 2][] 这里以vue cli3.x版本做参考,在package.json中配置 ![1 3][] 以上,现在代码中使用px就能直接转为对应的vw、vh属性了 ## 通过媒体查询处理边界情况 ## > 一般来说使用px转为vw、vh就可以应付99%的移动端适配了,但偶尔会有个别情况需要使用媒体查询适配小屏分辨率 比如以iphone6为基准布局,看起来毫无问题 ![1 4][] 但在如iphone5等320像素的分辨率下就会有些瑕疵 ![1 5][] 明显看到,字体重叠了。这时就可以请出法宝。用媒体查询解决 ![1 6][] 代码意思是,当用户手机分辨率(宽度)为320像素到340像素之间的时候做兼容处理,下面来看下处理后的效果 ![1 7][] 完美解决 ## 总结 ## 至于vw、vh属性的兼容性,从https://caniuse.com/网站给出的数据来看,pc端也许有点差强人意,但手机上基本可以放心使用了。(顺带吐槽一下浏览器兼容性真是阻碍技术发展的碍脚石) ![1 8][] 如果你对编程感兴趣或者想往编程方向发展,可以关注微信公众号【筑梦编程】,大家一起交流讨论!小编也会每天定时更新既有趣又有用的编程知识! [1]: /images/20210812/73fb849bf81444fda9426939e46f2fd0.png [1 1]: /images/20210812/501b16d878924987bcf4d7410b716461.png [1 2]: /images/20210812/10c326c20c8b4bc38bd0bbc6a03144cc.png [1 3]: /images/20210812/171d8d0a5acb4ae799f5e0efa7515bf0.png [1 4]: /images/20210812/06e85c71a8f54c75af57ba2508d0ec1e.png [1 5]: /images/20210812/36102d012387438f9b84cc6a4ccc4041.png [1 6]: /images/20210812/f0d0a84d5ad747408d35355c89a34759.png [1 7]: /images/20210812/0eaa5453e38c45f789ca3862d70f04dd.png [1 8]: /images/20210812/22abbf7a80614692bda55bc6e7d685fa.png
相关 移动端适配方案 * rem * 媒体查询 * vw,vh(安装postcss-px-to-viewport插件后进行简单配置就可以在页面直接使用px单位,项目编译后自动转换为对... 约定不等于承诺〃/ 2024年04月17日 15:18/ 0 赞/ 49 阅读
相关 移动端适配 视觉稿规范2点:1 以iphone6的 375 \ 667 为基点; 2 对于retina屏幕(dpr=2),为了高清,视觉稿的画布是基准的2倍: 就会变成75 水深无声/ 2023年08月17日 16:20/ 0 赞/ 125 阅读
相关 移动端适配 rem计算JS方式 计算尺寸参照的标准尺寸 750px 换算比例为 100:1 (100px=1rem 50px=0.5rem 5px=0.05rem) Bertha 。/ 2022年10月19日 05:39/ 0 赞/ 316 阅读
相关 移动端适配 移动端适配 一、移动端适配是什么? 二、基本概念 1.移动端设备视口 2. 什么是rem? 三、解决方案 1. 调 客官°小女子只卖身不卖艺/ 2022年08月31日 01:46/ 0 赞/ 375 阅读
相关 移动端适配 转自:/images/20220528/a9ac319170c44a5d85b86b4f83df39bf.png 大多都是介绍手淘团队的[flexible.js][ 怼烎@/ 2022年05月27日 23:28/ 0 赞/ 369 阅读
相关 移动端 - 适配方案 1. 百分比适配 2. viewport 适配 3. rem 适配 4. 弹性盒模型 box flex 补充 ╰+攻爆jí腚メ/ 2022年05月26日 10:10/ 0 赞/ 254 阅读
相关 移动端适配 1、首先在html页面中引入meta标签 <meta name="viewport" content="width=device-width, initial-sc 水深无声/ 2022年03月17日 06:14/ 0 赞/ 332 阅读
相关 移动端适配 移动端适配 1、html <meta name="viewport" content="width=device-width,initial-scale=1.0 冷不防/ 2022年01月29日 03:13/ 0 赞/ 402 阅读
相关 移动端适配 在上一片文章里,关于如何使用rem进行布局,我作了一个大概的描述。 今天这篇文字,主要说一个东西-dpr。 我们都知道,移动端开发,运行的平台主要是 ios 和 andr 野性酷女/ 2022年01月25日 18:23/ 0 赞/ 408 阅读
相关 【移动端适配】用vw、vh+媒体查询打造最完美的移动端适配方案 > 更新——前两天写的这篇文章未曾想能获得这番热烈反响,首先感谢大家的支持与抬爱,菜鸡表示诚惶诚恐。我也是刚入掘金不久,本意是想在这个有原则的前端社区写点文章,把平时积累多总结 ╰半夏微凉°/ 2021年09月19日 20:52/ 0 赞/ 565 阅读
还没有评论,来说两句吧...