♫【宽屏窄屏自适应】
<!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>