一劳永逸,解决移动WEB布局问题

很早以前做移动 WEB 布局的时候,要适应各种分辨率的移动设备,把与元素尺寸有关的css,如 width, height, line-height, margin, padding 等都以 rem 作为单位,这样页面在不同设备下就能保持一致的网页布局,响应式设计不就应该是这么干的吗?但是从工作量和复杂度方面来考虑,它有以下几个不足:

(1)假设一个 .item 类在所有设备下的 width 都是 3.4rem,但在不同分辨率下的实际像素是不一样的,所以在有些分辨率下,界面效果不一定合适,有可能太宽,有可能太窄,这时候就要对 width 进行调整,那么就需要针对 .item 写媒介查询的代码,为该分辨率重新设计一个rem值。然而 css 又有很多跟尺寸相关的属性,哪个属性在哪个分辨率范围不合适都是不定的,最后会导致要写很多的媒介查询才能适配所有设备,而且在写的时候rem都得根据某个分辨率 html 的 font-size 去算,这个计算可不见得每次都那么容易,比如 40px / 23.5px,这个rem值口算不出来吧!由此可见这其中的麻烦有多少。

(2)设计稿都是以分辨率来标明尺寸的,前端在根据设计稿里各个元素的像素尺寸转换为rem时,该以哪个font-size为准呢?这需要去写才能知道
正是因为以上提到的一些不足,我觉得这种适配方式不是特别好,写起来太麻烦。为了完成工作,我们需要找寻更简单更有效率的方法。

有些 web app 不一定很复杂,用简单的方法也行,就是高度固定,宽度自适应,然后用百分比布局,这是一种典型的弹性布局,关键元素高宽和位置都不变,只有容器元素在做伸缩变换。对于这类 app,记住一个开发原则就好:文字流式,控件弹性,图片等比缩放。

但这种布局也有很多问题,举例来说,因为现在很多设计稿是根据 iphone6 的尺寸来的,而 iphon6 设备宽的逻辑的像素是375px,而 iphone4 的逻辑像素是 320 个像素,所以如果你根据设计稿做出来的东西,在 iphone4 里面可能显示不下,而且高像素的设备用起来真的很难看。。。。下面介绍个简单的方法,一劳永逸解决布局问题:)

分享个简单的解决办法:

先来看看网易在不同分辨率下,呈现的效果:

1 继续阅读 一劳永逸,解决移动WEB布局问题