刚刚试着做了手机版的主题，紧接着就派上用场了，今天花费了一下午的时间，做了一个手机网站，专门为微信用户访问的投票网站，这是为学校官方微信评选运动会最佳拉拉队用的，不过我还是偷懒了，直接照着上次做的手机主题的样式做出来了。

其实，传说中的响应式网页跟手机版的页面很类似，手机页面为了适应各种屏幕大小，一般都会自动调节大小，响应式网页也是如此，只是响应式网页大到兼容电脑大屏幕，在一定程度上将，两者之间没有啥区别。

要说响应式页面和传统页面之间的区别，我收集总结了一下。

1、自适应主题要有明显的说明

要在网页头部加上这样的代码：

<meta name="viewport" content="width=device-width, initial-scale=1" />

代码的意思是，网页的宽度跟屏幕的宽度相同（width=device-width），缩放比例是1，也就是不缩放（initial-scale=1）。

不过，这种一句代码的解决方案到IE就绝对行不通的节奏。如果是IE6~9，就需要使用第三方js。css3-mediaqueries.js。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]—>

2、宽度，一定要用百分比。

按照传统网页，网页的元素一般使用的是像素单位的，比如说 width:100px;，但是到响应式网页就不能用像素了，全都用百分比，或者直接用auto。所以编辑响应网页的时候，只要计算好比例就可以了。

3、字体大小也要用比例

字体不能再使用px这种绝对大小，而要用em这种相对大小的。

比如说

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

或者

font-size: 1.5em;

4、图片自动调整

图片的设置相对来讲比较简单了，只要将所有的图片设置成这样：

img { max-width: 100%;}

对于IE这种顽固的家伙，只能使用这句：

img { width: 100%; }

5、使用浮动元素

浮动元素的目的就是为了，如果宽度变窄，并列的元素会自动掉下去，避免出现水平滚动条。

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

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

这就是传说中的流动布局 fluid grid

另外，还有一些相关的东西，不过我目前还没有看懂，所以就没有编写。思路上，响应式网页还是很简单的，根本没有想象中的那么复杂，看来在此之前，响应式网页和响应式主题真的把我给唬住了。无非就是将“PX”换成了“%”。