移动端适配问题解决方案
随着时间的发展,现在基本上人手一部手机的低头族。做为前端开发的程序猿,在开发移动端web应用的时候,对面一堆各色尺寸不一样的屏幕,就有点淡淡的忧伤。
以上是2018年二月份最新的友盟数据,可在这里查看详情
很明显我们所要实现的就是在上述如此之多的屏幕,都能实现UI大大出的视觉图上的效果。而要实现这样的效果主要有两个难点
- 各屏幕适配
-
Retina屏下的细节处理(主要是1px的问题)
flexible + rem显而易见,该方案是由rem 以及 flexible组成的。rem (font size of the root element)相对于根元素(即html元素)font-size计算值的倍数,flexible 即 flexible.js, 手淘团队提供的一个为该方案屏幕适配而写的一个库,主要实现的功能就是,根据屏幕的宽度给 html 元素设置一个合适的 font-size 值。
怎么样看的不是很懂是吧。让我来用一个页面场景再复述一遍。
正常情况下,我们的UI大大会以iphone6的尺寸为标准,做一套视觉效果图,并在上面进行标注,给到我们的标注图,如下所示
拿到这个图 我们该如何下手呢
- 先设置 html 元素的 font-size, 这个值我们暂时设置为 font-size: 37.5px,即1rem = 37.5px;
- 以iphone6为例子,其屏幕宽度为 750px, 整个屏幕的宽度即 20rem = 37.5 * 20px = 750px;
- 此时手机号的输入框为 490px = 13.06777777rem
-
依次将页面上的px转换为rem,这样我们就得到了全是rem为尺寸单位的页面
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>引申一下在上述过程中,你会发现,UI给到我们的一般是px标注的图,我们将其转化为rem,这个过程其实会花费很大的计算时间。做为一个合格的程序员,我们应该把这种机械性无脑的操作交给计算机来实现。我使用的是PostCss的插件 postcss-px2rem,这个插件能让我们在写代码时候直接写px,在构建的时候自动将我们所写的px转换为rem,大大提升了我们的开发效率。
vw这个vw的方案,相当而言还比较新。vw 即(viewport width)可视窗口的宽度。之所以把这个方案放在后面来说,是因为viewport在去年(2017年)的时候存在不少的兼容性问题,各个浏览器的支持并不是很好。但是来到了2018年这个时间点,viewport单位意见得到了众多浏览器的支持(80.45%)。
可以在这里查看。
接下来就让我们来正式了解下这个方案吧。vw既然是一个尺寸单位,那它的宽度等于多少呢?等于1%整个屏幕的宽度。举个例子,再次以iphone6手机为例,100vw = 750px => 1vw = 7.5px
再一次那上次的界面做示范
- 根据定义,我们了解了在iphone6手机上 1vw = 7.5px
- 此时手机号的输入框为 490px = 65.333333vw
-
依次将页面上的px转换为vw,这样我们就得到了全是vw为尺寸单位的页面
引申一下跟之前一样的痛点,我们仍然需要花费大量不必要的计算时间去把标注图中的px转换为vw,有没有类似于postcss-px2rem的工具呢?很荣幸能再次站在巨人的肩膀上,已经有大神写了了类似的PostCss插件 postcss-px-to-viewport
1px问题移动端的屏幕不仅仅分辨率有差异,其实还有Retina屏的问题。正常情况下,我们代码里的1px在屏幕上就应该显示一个像素点,但是在Retina屏下则不仅仅是一个像素点。再次拿iphone6为例,其dpr(device pixel ratio)设备像素比为2,css中一个1x1的点,其实在iphone6上是2x2的点,并且1px的边框在devicePixelRatio = 2的Retina屏下会显示成2px,在iPhone6 Plus下甚至会显示成3px。
这样的话,我们就会发现在有些手机上1px明显跟另外的一些手机的1px粗细不一样。其实大多数的小公司不会扣这样的一个细节,比如说我们公司不会。(^__^) 嘻嘻……
但是作为一个有追求的前端工程师,我们应该尽量的把事情做的完美一点,(ps.像大公司看齐,在大公司这个细节问题其实是不容忽视的,为了自己以后的发展前途,我们有必要把这个细节完善掉的。)
这个问题的解决方案有很多,个人觉得最简单方面的还是大漠大大的一种解决方案。使用postcss-write-svg插件,
@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } }.example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;}编译出来就是
.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;}其他小程序中的屏幕适配最近在写小程序,在小程序里,使用的是小程序的那套,跟平时用的vue全家桶以及react全家桶不一样,并没有配置webpack,在这种情况下我们使用postcss其实很困难(反正我是搞不出来/(ㄒoㄒ)/~~)
那该怎么办呢,小程序提供了一个自己的单位, rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备
rpx换算px (屏幕宽度/750)
px换算rpx (750/屏幕宽度)
iPhone5
1rpx = 0.42px
1px = 2.34rpx
iPhone6
1rpx = 0.5px
1px = 2rpx
iPhone6p
1rpx = 0.552px
1px = 1.81rpx
我们直接用拿到iphone6的标注图,直接写rpx就好。
标签: 移动端
最新碎语
- 未来的个人只有具备以下六种技能后,才能从容应对未来的各种挑战,排名第一的技能就是设计能力。其它的五项技能分别是:讲故事的能力、整合事物的能力、共情的能力、会玩儿的能力,以及在任何事情中找寻意义的能力。
2018-09-29 18:02
- 当你没有任何产品可以拿去卖或者搞促销的时候,你就会在最大程度上提升价值这就是正式推出产品前的几个月(或者几年)是最好时机的原因。你的产品会变得100%真实可信。产品的发展道路将不会出错,人们会乐意加入进来。如果你给他们足够的收益,那么他们就会感激你,未来你也就可以依靠他们了。
2018-08-26 08:23
- 在你的领域成为专家,不断为他们提供高质量的产品,最重要的是关注你的用户,并为他们带去真正的价值。
2018-08-26 08:22
- 我知道我们都希望自己可以快速成长,是的,建立真正的关系式是难以衡量的。但是,如果你关注你的用户,能为他们带去真正的价值,那么你就已经打下了成功的基底了。这关键的一步可能会让你在未来对其他资源有预先衡量的优势。
2018-08-26 08:18
- 何为第一?所有的人都需要你的时候,你能够给他们带来所需要的,你就是第一。任何事情都有它的顺序,讲因缘,时节,果报,要一步一步来,时间未到,你想也没有,时间一到,你不想它也有。德和得分别代表了内在和外在,它也代表了同一种东西的两个状态:能量和质量。
2018-06-28 09:07
链接
blogger
蓝蓝 http://www.lanlanwork.com
存档
- 2019年2月(9)
- 2019年1月(45)
- 2018年12月(41)
- 2018年11月(40)
- 2018年10月(29)
- 2018年9月(40)
- 2018年8月(87)
- 2018年7月(107)
- 2018年6月(86)
- 2018年5月(110)
- 2018年4月(40)
- 2018年3月(35)
- 2017年8月(35)
- 2017年7月(45)
- 2017年6月(7)
- 2017年5月(27)
- 2017年4月(51)
- 2017年3月(70)
- 2017年2月(65)
- 2017年1月(69)
- 2016年12月(55)
- 2016年11月(111)
- 2016年10月(92)
- 2016年9月(53)
- 2016年8月(9)
- 2016年7月(4)
- 2016年6月(9)
- 2016年3月(19)
- 2016年2月(26)
- 2016年1月(30)
- 2015年12月(33)
- 2015年11月(35)
- 2015年10月(46)
- 2015年9月(43)
- 2015年8月(40)
- 2015年7月(33)
- 2015年6月(46)
- 2015年5月(58)
- 2015年4月(70)
- 2015年3月(55)
- 2015年2月(17)
- 2015年1月(33)
- 2014年12月(21)
- 2014年11月(84)
- 2014年10月(94)
- 2014年9月(6)
- 2014年8月(1)
- 2014年7月(13)
- 2014年6月(66)
- 2014年5月(99)
- 2014年4月(88)
- 2014年3月(102)
- 2014年2月(68)
- 2014年1月(83)
- 2013年12月(106)
- 2013年11月(112)
- 2013年10月(61)
- 2013年9月(20)
- 2013年7月(13)
- 2013年6月(27)
- 2013年5月(48)
- 2013年4月(39)
- 2013年3月(8)
- 2013年2月(20)
- 2013年1月(31)
- 2012年12月(33)
- 2012年11月(31)
- 2012年10月(23)
- 2012年9月(8)
- 2012年7月(14)
- 2012年6月(15)
- 2012年5月(31)
- 2012年4月(24)
- 2012年2月(4)
- 2012年1月(8)
- 2011年12月(35)
- 2011年11月(32)
- 2011年10月(13)
- 2011年8月(1)
- 2011年6月(1)