移动端屏幕适配——上篇

最近遇到了一个比较复杂的移动端页面，就重新学习了一下移动端的屏幕适配。发现水很深！

先来说说我最近接触的一些页面，都是比较简单的，举个相似的例子，拉钩网iphone6下显示效果：

iphone5下显示效果：

ipad下显示效果：

可以看出这类的页面有两大特点：

• 顶部和底部的部分不管怎样，高度和位置都不会变
• 中间的信息不管怎样，都是分了三块，最左边和最右边的信息，还有中间的信息

这种页面是一种典型的弹性布局：
元素高度和位置都不变，只有容器元素在做伸缩变换。

这类页面是适配布局里面的基础布局，对于这类的页面，只要做到：文字流式，控件弹性，图片等比缩放，如图（转自http://www.cnblogs.com/lyzg/p/4877277.html）所示：

通俗一点，width可以用百分比，高度用px作为单位。屡试不爽啊~

但是拉钩网专门对iPhone4做了适配（转自http://www.cnblogs.com/lyzg/p/4877277.html）：

如果啊到的设计稿是基于iphone4设备大小的，就没有问题。如果难到的是大屏幕设计稿，就要考虑小屏幕的适配问题了。