最近遇到了一个比较复杂的移动端页面,就重新学习了一下移动端的屏幕适配。发现水很深!
先来说说我最近接触的一些页面,都是比较简单的,举个相似的例子,拉钩网iphone6下显示效果:
iphone5下显示效果:
ipad下显示效果:
可以看出这类的页面有两大特点:
- 顶部和底部的部分不管怎样,高度和位置都不会变
- 中间的信息不管怎样,都是分了三块,最左边和最右边的信息,还有中间的信息
这种页面是一种典型的弹性布局:
元素高度和位置都不变,只有容器元素在做伸缩变换。
这类页面是适配布局里面的基础布局,对于这类的页面,只要做到:文字流式,控件弹性,图片等比缩放,如图(转自http://www.cnblogs.com/lyzg/p/4877277.html)所示:
通俗一点,width可以用百分比,高度用px作为单位。屡试不爽啊~
但是拉钩网专门对iPhone4做了适配(转自http://www.cnblogs.com/lyzg/p/4877277.html):
如果啊到的设计稿是基于iphone4设备大小的,就没有问题。如果难到的是大屏幕设计稿,就要考虑小屏幕的适配问题了。