响应式页面设计参考资料 http://www.qianduan.net/responsive-web-design.html
原理根据不同浏览器宽度，页面设置不同的展示样式。
使用JS模拟
<!DOCTYPE html>
<html>
<head>
<title>css width</title>
<style type="text/css">
.divTest{
border:solid 2px gray;
width:300px;
height:200px;
}
.w1200 .divTest{
background-color:red;
}
.w900 .divTest{
background-color:black;
}
.w400 .divTest{
background-color:blue;
}
.w300 .divTest{
background-color:#eee;
}
</style>
<script type="text/javascript">
(function(){
var w = window.screen.width;
var c = '';
if(w>1200){
c = ' w1200';
} else if(w>900){
c = ' w900';
} else if(w>400){
c = ' w400';
} else {
c = ' w300';
}
document.documentElement.className += c;
})();
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
宽度：<span id="spanWidth"></span>
<div class="divTest"></div>
</div>
</form>
</body>
</html>
根据不同页面宽度，设置不同的html class，根据不同的 .w400 div {color:red;} 设置不同样式。