博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

响应式网页设计

Posted on 2011-12-26 13:25  PHP-张工  阅读(470)  评论(1)  编辑  收藏  举报

响应式页面设计参考资料 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;} 设置不同样式。