如何设计移动端屏适配方案
一、前言
在众多的移动设备中,前端开发人员如何在不同屏幕大小,不同程度的高清屏下去百分百的还原设计稿,从来都不是一件简单的事情,需要考虑众多因素,权衡利弊,做出取舍,结合需求去选择最合适的方案。
之前有一篇:如何设计移动端高清方案
二、面对的问题
在不同大小和高清的屏幕下:
(1)如何保证 页面布局的一致性:不错乱,不变形;
(2)如何保证 字体大小的一致性:大屏显示更大,小屏显示更小或者更多;
(3)如何保证 1px的边框一致性:不同的高清屏也能正常显示1px的高度;
(4)如何正确 图片清晰度一致性:不停大小和高清屏下都能看到清晰的图片。
如果把这几个问题按重要程度排序的话,我想应该是这样的:
布局 > 字体大小 > 1px边框 > 高清图
三、布局
方案一:百分比布局
使用子元素在父元素下的百分比为单位,使用子元素在不同屏幕下宽度表现一致。利用img标签的特性,只设宽度等图片加载完,这种方法会导致大量的重排,并且非固定高度会导致懒加载等功能难以实现。
缺点:
(1)宽度是可以随屏幕适应,但是高度不能,宽屏会被拉伸,具体表现为,iphone4中看到的是正方形,而在iphone6s中会看到长方形。
(2)需要手动计算子元素在父元素下的百分比,计算麻烦。
(3)百分比的大小往往需要精确到小数位6到8位。
方案二:媒体查询调整
1、一种是结合百分比或者flex布局,对特定的模块在特定的屏幕宽度范围内做调整。
2、另外一种是结合rem,对不同的屏幕宽度范围内的设备设置不同的rem参照字体大小。
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
缺点:
无法完全适配到android设备的各种屏幕,无法保证显示的一致性。比如:定义了一个模块的高度是321至375下是40px,那么这个模块在这个范围内显示的就是40px,而不是随着屏幕变化而变化的。
方案三:flex布局
类似于百分比布局,无需计算百分比,可以很好的适配到所有屏幕,手机天猫就是典型的flex布局,flex做了很好的兼容处理,高度写死,可查看顶部搜索栏的源码。
缺点:
1、有着和百分比一样的缺点,高度不便于调整。
2、有几种不同的flex标准,在低端ios和安卓中有着各种兼容性问题。
方案四:使用rem单位
和上面几种布局方案结合使用,主要是做高度调整,保证布局一致。
视口不缩放使用rem
分析:
1、根据图片可以看出网易为750的设计稿,因为750下是html字体大小是100px,这样在切图时,方便px转rem,750设计稿上是大小是50px,那么转换成rem就是.5rem(如:24px -> .24rem);
2、px转rem简单方便;
3、没有做1px高清屏处理;
4、未做图片高清处理。
视口缩放下使用rem
分析:
1、设计稿750的
320 dpr=1 font-size=32px
320 dpr=2 font-size=64px
375 dpr=2 font-size=75px
414 dpr=3 font-size=124.2px
换算规则:(屏幕宽度*dpr)/10 (除以10是为了把屏幕分为10份。为了将来替换成vm或者vh单位方便)
2、屏幕根据dpr的值进行了相应的缩放;
3、很好的还原了1px高清屏真实度;
4、图片使用了750px下的两倍图,并没有做按dpr的值加载不同的图片;
5、px转rem需要使用工具转换。
方案五:使用vw
面对的屏幕的分辨率,DPR,1px,2X图等一系列问题,不再是使用hack手段处理,而是使用原生的css技术处理。在flexible方案中通过js模拟vw特性,现在vw已经得到众多浏览器的支持,直接使用vw单位在适配的布局中。
vw是viewPort的视窗的长度单位,这里视窗指的是浏览器可视化的区域,而这个可视化区域是window.innerWidth/window.innerHeight的大小。
涉及到单位:vw,vh,vmin,vmax。
vw:是viewPort width的简写,1vw = window.innerWidth的1%;
vh:类似,1vh = window.innerHeight的1%;
vmin:是当前vw和vh中较小的值;
vmax:是vw的vh中较大的值;
目前出视觉设计稿,我们都是使用750px
宽度的,从上面的原理来看,那么100vw = 750px
,即1vw = 7.5px,我们可以根据设计图中的px直接转换成对应的vw值,又要开始计算,我们可以使用postcss的插件postcss-px-to-viewport,我们直接写px,postcss编译之后就是我们需要的vw。
实际是哟女的时候,我们可以进行相关参数配置
"postcss-px-to-viewport": {
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
}
哪些地方是可以使用vw来适配的?
(1)容器适配,可以使用vw;
(2)文本适配,使用vw;
(3)大于1px的边框,圆角,阴影都可以使用vw;
(4)内距和外距,可以使用vw;
解决retina下的1px方案,依旧是使用postcss插件,postcss-write-svg,使用postcss-write-svg你可以通过border-image
或者background-image
两种方式来处理。
.example {
border: 1px solid transparent;
border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
//或者使用background-image
//background: white svg(square param(--color #00b1ff));
}
这样PostCSS会自动帮你把CSS编译出来:
.example {
border: 1px solid transparent;
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
// background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}
还需要在head中添加
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
四、我理解的最佳实践
1、用户体验要求很高的页面,如UV较高的页面,活动页这些应该以用户体验优先,使用vw是实现页面的适配,通过postcss-px-to-viewport把px转换成vw;更好实现长宽比(针对img,video,iframe),通过postcss-aspect-ratio-mini插件实现;为了解决1px的问题,使用post-write-svg,自动生成borde-image或者background-image的图片。
注意:px转换成vw,多少会存在一定的像素误差,无法完全整除。
2、在其他页面,股东视口,不缩放,使用rem做布局适配,js添加屏幕标识以便调整字体大小,使用@2x图片,只做ios8+的1px处理
五、参考
1、https://www.w3cplus.com/css/vw-for-layout.html
2、http://coderlt.coding.me/2016/03/08/retina-screen-adapter/
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/616.html)
- 记录一次nginx故障:recv() failed (104: Connection reset by peer) while reading response header from upstream,
- 微信小程序初体验,入门练手项目--通讯录,部署上线(二)
- 微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器(一)
- thinkjs性能优化之nginx配置
- 开学AI登场!南京高校用人脸识别查考勤管理学生,还敢逃课、玩手机?姚AI变脸热到爆!开源换脸工具FakeSwap今登GitHub排行榜第二位,ICLR飞升,IJCAI降级:清华的新版AI顶会评级引发学术圈热议,意外!已获6700万美元投资的自动驾驶LiDAR创业公司关门了
标签云
图文推荐
“深度学习”这十年:52篇大神级论文再现AI荣与光,12岁上大学、31岁成最年轻IEEE Fellow,前百度总裁张亚勤加盟清华,全球女性福音!DeepHealth深度学习模型检测乳腺癌完胜5名放射科医师,读博无门,就业碰壁,孤独当了7个月“民科”后,我的论文中了顶会Spotlight
saucxs 2020-01-03 10:04:09
1200 万部手机、500 亿实时位置数据,上帝视角还原特朗普全天行踪,自动驾驶玩漂移 斯坦福最新研究:《头文字D》无人车版来了,印度裔又要统领美国科学界?特朗普提名他领导美国国家科学基金会,GitHub排名第一!免费最强“抢票神器”在手,程序员抢票再不用跪求加速包
saucxs 2019-12-25 10:08:05
蝉联AI专业全球冠军!清华力压CMU再夺CSRankings高校AI排行王座,波士顿动力CEO:不排斥军方订单,就想你粗暴地对待机器狗,亚马逊Alexa突然发疯,读着论文教主人自杀:你活着地球人口会过剩,图神经网络的ImageNet?斯坦福大学等开源百万量级OGB基准测试数据集
saucxs 2019-12-24 09:57:45
2020 AAAI Fellow名单出炉!深度学习先驱Bengio和LeCun双双入选,李世石最后一战不敌AI“韩豆”!唯一战胜过AlphaGo的男人正式退役,GAN和PS合体会怎样?东京大学图像增强新研究:无需配对图像,增强效果还可解释,2019年最受关注的100项研究,AI“复活”蒙娜丽莎排第一
saucxs 2019-12-23 09:58:10
这家AI公司用面具破解中国人脸识别系统!微信、支付宝、火车站无一幸免,OpenAI公开Dota 2论文:胜率99.4%,「手术」工具连续迁移训练,9岁神童大学毕业前突然退学,转赴美国攻读电气工程博士,Reddit热议:15岁高中生用神经网络建立生命进化“新宇宙”
saucxs 2019-12-17 09:45:30
- 东方财富
- saucxs博客园
- weekly周报
- loveBook
- 前端博客
- 技术交流学习社区
- saucxs
- segmentfault
- saucxs的博客
- haorooms
- luckyscript
- 东方财富期货
- 峰云就她了
- binlive
- songEagle
- 且听风吟
- (TX)Heying Ye
- CG Online Judge
- Chris's Blog
- vueRouter
- 龙恩0707
- 鑫空间,鑫生活
- 木易杨
- MDN-js
- Cherry's Blog
- InterviewMap
- 安安哥的小戏台
- xiaojun1994-cat
- JavaScript-Garden
- junruchen-daily
- 秋天爱美丽
- web-summary-daily
- w3cplus-tb
- 潜行者m
- 于江水
- KieSun-git
- cnodejs
- aerminBlog
- fex_bd
- gwuhaolin-git
- Deboy's Blog
- react-china
- react.docschina
- Vuejs社区
- vuejsDoc
- cdnSocketIo
- shuaihuaCC
- colorize
- stazhu
- 前端学习
- IBM Dev社区
- linux运维笔记
- webpackDoc
- sayskyGithub
- 前端里
- 996.ICU
- electronjs
- CS-Notes
- mqyqingfengBlog
- beego官方
- 编码规范
- 阮一峰个人网站
- sessionstack
- damonareGoUp
- 咀嚼之味
- fe-interview
- xd-tayde/blog
- css-tricks
- ghmagical个人中心
- markyunp6
- hellogithub
- 霜序廿
- rin部落
- 建站素材
- 前端资源网
- CSS开发手册
- web技术交流
- 程新松个人网站
- wangEditor
- 小松博客
- 交流学习社区