一.整体设计
首先,我们要了解一下测试工具。这里提供两种测试工具,一种是 Chrome 自带的移动端测试工具,另一种是 Opera Mobile 移动端测试工具。这里主要以 Chrome 为准,他模拟了主流的手机,并且引擎是webkit。
首先,我们介绍一下分辨率,通过 Chrome 移动端测试工具可以得知,一般分辨率最小的不会小于 320了,最大的不超过 640。这时有人会疑问,我的手机分辨率是一千多呢,为什么设计的时候还是 640像素?比如 iphone6 plus 的分辨率为:1080x1920(有一些设计者称实际分辨率:1242 x 2208),而它的逻辑分辨率为:414x736。没有超过 640,通过页面缩放技术进行缩小而不会失真。而如果是 ipad,分辨率为:1563x2048,而它的逻辑分辨率则为 768x1024,所以,如果设置 640 的页面,会在竖屏出现白边。
其次,我们看下典型的两种设计,一种是全屏流体设计,另一种是固屏流体设计。下面有几个代表网站:
全屏类:
1.腾讯新闻:http://xw.qq.com/
2.途牛旅游:http://m.tuniu.com/固屏类:
1.京东商城:http://m.jd.com/
2.淘宝网:http://m.taobao.com/
如果只是兼容移动手机端,那么不管是固屏还是全屏都是一样。从设计难度上来说,固屏貌似更容易一点点,因为全屏设计,在电脑上设计,完全放大又失真,设计起来比较难受。我们这里推荐使用固屏。当然,全屏设计,在PC 端和 PAD 平板也可以无缝浏览,但图片却会失真。固屏虽然会留有白边,但图片不会失真。再当然,用了 PAD 或 PC 端,为什么却访问用手机网页呢?除了设计师,还有谁会去这么做?所以,没必要。
二.必要知识
做移动站有一个必要的知识,就是关于屏幕宽度以及缩放问题。我们习惯性的在<head>
标签之间增加一个<meta>
标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
//窗口设定
name=”viewport”//页面大小屏幕等宽
width=device-width//初始缩放比例,1.0表示原始比例大小
initial-scale=1.0//允许缩放的最小比例
minimum-scale=1.0//允许缩放的最大比例
maximum-scale=1.0//用户是否可以缩放,这里 no 表示不可以
user-scalable=no
上面最大最小比例其实就已经限制了无法缩放了,和最后一个是否可以缩放有同样的功能。
因为不同的手机,分辨率都不同,图片一定要能够自适应等比例缩放,才能保证布局的正确性。
//设置 max-width 后,图片开始自适应
img {
display: block;
max-width: 100%;
}