[Java教程]【移动适配】移动Web怎么做屏幕适配(一)
0 2016-03-02 10:00:06 屏幕适配是一个很容易被忽略的问题,但对于精益求精的产品而言,是必不可少的。对于Web开发的求职者而言,也是一个必需要理解清楚的经典问题
首发于微信公众号(啃先生)
(一)
移动端适配的是什么?
我们讨论的是网页适配多种尺寸屏幕,让网页效果看起来和设计师的设计稿一样。说白了就是同一套代码在不同分辨率的手机上跑时,页面元素间的间距,留白,以及图片大小会随着变化,在比例上跟设计稿一致。
举个粟子吧
图1. 260*400的屏幕
图2. 380*400的屏幕
上边的页面在不同大小屏幕上的展现,咋一看没什么问题,一般的工程师会认为已经OK了,所以前端工程师很容易忽略屏幕适配。但是对于一些精益求精的产品而言,这还达不到要求。例如有以下问题:图1的屏幕的尺寸较小,因此头像应该小些,话题左边的空白也应该小一些。
图片应该保持正方形,而且两张图之间的边距应该随屏幕变化而变化