H5移动端页面设计的基础规范

作者：华清远见讲师

随着智能手机、平板电脑等移动终端的发展和普及，普通大众对手机网站的认知度得到了明显的提升。安卓，IOS手机系统的逐步发展也带动了手机页面的发展，跟PC网页相比，手机网站和普通网站有两大不同点：

第一，访问入口不同。与传统的电脑上网相比，手机上网具有便捷、随时随地的特点。

第二，浏览方式不同。由于电脑上的屏幕比手机大很多，普通网站比手机网站拥有更强的展示能力，能在一个网页上占时大量的图片、视频、语音等全方位的信息，但是手机网站由于屏幕尺寸的限制，更多地仅仅是用文字和图片来表现。

介于这两点不同于普通网站的区别，分享一下我的一些移动端网页设计经验与心得。

⒈ 分辨率

这应该是移动端网页最关心的问题了，因为移动设备五花八门，各种分辨率都有。要想在这些设备上都能有良好的浏览体验，得花一番功夫。使用viewport：这已经是移动端网页的必备了，它可以设定页面的宽度，是否允许缩放等等。

一般设置width=device-width，就是设置为设备的屏幕宽度，当然也可以是具体数值。百分比与max(min)-width使用：移动端网页不仅分辨率不一，而且随时可以横竖屏切换，所以百分比宽度设定非常必要，再配合max(min)-width限制最大(小)宽度，能有效的适应各种分辨率。

这里的意思就是在大于640px的屏幕宽度下，使用style1样式，也可以写在样式内部，如：

@media screen and (min-width: 640px){.d1{background:#ccc;}}

2.不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。 具体说，CSS代码不能指定像素宽度： width:xxx px;

只能指定百分比宽度： width: xx%或者 width:auto。

3.相对大小的字体

字体也不能使用绝对大小(px)，而只能使用相对大小(em)。

body {font: normal 100% Helvetica, Arial, sans-serif; }

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {font-size: 1.5em;}

然后，h1的大小是默认大小的1.5倍，即24像素(24/16=1.5)。

small { font-size: 0.875em; }

small元素的大小是默认大小的0.875倍，即14像素(14/16=0.875)。

4.流动布局(fluid grid)

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main { float: right; width: 70%; }

.leftBar { float: left; width: 25%; }

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。

另外，绝对定位(position: absolute)的使用，也要非常小心。

4.图片的自适应

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。

这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});