如今的网络已经不在是PC（个人电脑）一家的天下了。对于一个站点来说，面向不同的终端设备平台（手机、平板电脑等）设计独立的html模板也是大势所趋。

但是，说起来容易，做起来却不是那么简单。个人站长们需要花费更多的精力和时间在应对不同浏览终端设备的切换中。

有没有能够自适应的html模板呢？答案是肯定的。本文中，笔者为各位简单叙述一款能够在桌面浏览器和手机间自由切换的html模板。

HTML文档结构

笔者在下面的例子中用到了html 5的部分元素，如header、footer等等。个人强烈推荐在html 5。但可能在IE浏览器中无法很好的兼容，请使用html shiv（关于html shiv是什么请搜索之^_^）。

例子中页面内容很简单，毋须赘述。使用一个wrapper类的div来封装整个页面。带有导航的、标题的header； 正文部分则放在article里；页脚中包括一个简单的自我介绍。

查看演示 下载源代码

具体看下面的代码：

下面是没有添加css样式表的页面效果：

CSS样式表

下面为body建立了一个基本的样式，包括字体大小、样式等等。

body { background: #F9F9F9; color: #222; font-family:
“微软雅黑”，'Droid Serif', serif; font-size: 16px; }

其他样式设计

这是剩下的样式设计，正文部分为两列，页面宽度定义为相对数值。

h1 { font-size: 90px;
    font-family: 'Droid Serif', serif;
    line-height: 75px; padding: 10px;
    -webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in;
}
h1 a:hover { text-decoration: none; color: #27B3CF; }

h2 { font-family: 'Helvetica'; font-size: 18px; padding: 10px;
    -webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in;
}
h3 { font-family: 'Droid Serif', serif; font-size: 30px; }
h4 { font-family: 'Droid Serif', serif; padding: 3px; margin: 5px 0 0 0; }
h4 a { text-decoration: underline; }
h4 a:hover { text-decoration: none; }

nav { background: #222; padding: 0; margin: 10px 0;}
nav a { color: #F9F9F9; display: block; float: left; padding: 10px; }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }

.left-col { width: 70%; float: left; }
.sidebar { width: 20%; float: right; margin-bottom: 10px;
    -webkit-transition-property: width;
    -moz-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in;
}

#featured { padding: 20px; }
#latest { padding: 20px; }
#about { padding: 20px; }

p { padding: 0 5px 0 5px; }
ul { list-style: none; }
ul li { margin: 0 5px; }

footer { padding: 5px}

完成后的效果如下：

接下来是重头戏，如何根据浏览器类型自动调整网页的宽度呢？

首先在header之间加入一下代码

添加一个新css文件，media_queries

@media screen and (max-width: 478px) 	{
h1 { font-size: 50px; padding: 1px; }
h2 { font-size: 13px; padding: 1px; }
body { font-size: 13px; }
}

@media screen and (max-width: 740px) 	{
.left-col { width: 100%; }
.sidebar { width: 100%; }
}

@media screen and (max-width: 480px) {

}

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

在android浏览器或iphone手机中就可以看到网页的显示效果：

=_=!笔者的安卓手机不支持截屏，只好等晚上用ipod截好了再上传图片了。各位不妨通过手机浏览看看效果，是不是和普通pc不一样呢^_^