GitHub 博客园 Nanakon

♫【宽屏窄屏自适应】

CNZZ 数据中心 市场分析报告 终端分辨率

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #content {
            width: 990px;
            margin-right: auto;
            margin-left: auto;
            background: red;
        } 
        .bmh-w1190 #content {
            width: 1190px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="content">content</div>
    <script>
        ;(function() {
            var body = document.body

            function addClass(node, str) {
                if (!new RegExp('(^|\\s+)' + str).test(node.className)) {
                    node.className = node.className + ' ' + str
                }
            }

            function removeClass(node, str) {
                node.className = node.className.replace(new RegExp('(^|\\s+)' + str), '')
            }

            function setPageWidth() {
                var w = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth
                if (w > 1360) {
                    addClass(body, 'bmh-w1190')
                    removeClass(body, 'bmh-w990')
                } else {
                    addClass(body, 'bmh-w990')
                    removeClass(body, 'bmh-w1190')
                }
            }

            if (window.addEventListener) {
                window.addEventListener('resize', setPageWidth, false)
            } else if (window.attachEvent) {
                window.attachEvent('onresize', setPageWidth)
            }

            setPageWidth()
        })();
    </script>
</body>
</html>

 

posted on 2014-01-08 15:24  jzm17173  阅读(146)  评论(0编辑  收藏  举报

导航

轻音