第一步：在网页代码的头部，加入一行。

第二步：兼容IE6，7，8

三、不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要.建议用百分比。

四、选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。 可以为每一种终端写一个css。

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

@import url("tinyScreen.css") screen and (max-width: 400px);

（ 是 ，用于加载外部层叠样式表。@import规则必须放在其他除了规则以外的CSS规则的前面；@import规则不可于中。 ）

  五.CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。

　@media screen and (max-width: 400px) {　　　　.column {　　　　　　float: none;　　　　　　width:auto;　　　　}　　　　#sidebar {　　　　　　display:none;　　　　}　　}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

六. 图片的自适应（fluid image）

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

img { width: 100%; }