手机网页示例1——通过CSS的宽度百分比设置达到页面自适应效果

手机网页与传统PC网页存在很大区别的一点在于页面展示。
PC网页在布局方面常常会在两边“留白”——比如把网页的主要内容居中，然后两边通常不做布置（只是显示背景）。这是因为PC屏幕大，屏幕能显示的内容多，网页设计者当然可以把需要展示的内容仅仅放到页面中间就基本足够了，而且这样还能够让页面显得美观、整洁。
而对于手机网页，手机屏幕的尺寸本来就比较小。所以通常手机网页的布局都不会在页面两边留白。设计者总是尽量让页面信息量铺满屏幕。又由于手机屏幕无论是在分辨率还是尺寸上都没有一个统一的标准，所以对于手机网页，设计者通常的做法是让手机页面“实现自适应”——也就是遇到大屏，我的页面就能够自动适应放大去填充大屏；遇到小屏我也能够自动缩小而不会超出屏幕。
下面的示例是一个简单的php+css的手机网页。
先来看看这个页面的php（html）结构。分为9个模块，代表页面里的9个方块。如下图所示。一个div代表一个模块。

再来看看这个页面的css代码：

.introductionBig{
	float:left;
	width:50%;
}

.introductionBig img{
	width:100%;
}

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

.introductionSmall img{
	width:100%;
}

body{
background-color: #000;
}

很简单的代码。基本上需要注意的有两点：
1. 将所有div元素都设置为float:left，这样这些方块就能够整齐地自左向右排列好，一旦占据完某一行，就自动跳到下一行继续有序排列。
2. 使用百分比来设置宽度。“width:百分比” 的css设置会让页面达到前面提到的适应不同大小屏幕“伸缩自如”的效果。css的百分比设置是对应于父元素的。缺省下，外层的元素层层继承上级，占据页面100%的宽度。这个时候，introductionBig的div设置了50%，表现到页面上就是那些诸如“店长推荐”、“最新优惠”的大方块占据了页面一半的宽度；而introductionSmall，也就是那些小方块，设置为占据页面1/4的宽度。此外，注意img的宽度设置为100%，因为img的父元素是div，所以其百分比是对应于外面的introductionBig或introductionSmall的，100%表示占满他们所在的div。高度不需要设置，这样一来，图片就不会变形——高度会根据图片的原始比例进行自动调整。
这样的html+css的布局能够保证在ie7 8 9以及ff下显示正常，并达到我们前文提到的适应手机不同屏幕大小的效果。我在实践的过程中曾经犯过这样的错误——把那几个小的方块，也就是introductionSmall放到了一个introductionBig中，结果在ff下显示也正常，但是到了ie中就出现各种错误——小方块们越来越小。这个是题外话了。有兴趣的同学可以另外试试。