手机网页示例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