<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html> <script> function client() { if(window.innerWidth!=null){ return { window.innerWidth, height:window.innerHeight } } else if(document.compatMode==="CSS1Compat"){ return{ document.documentElement.clientWidth, height:document.documentElement.clientHeight } } else{ return{ document.body.clientWidth, height:document.body.clientHeight } } } reSize();//页面一加载先调用函数一次 window.onresize = reSize; //不带括号,只要屏幕触发,就调用reSize函数 function reSize(){ var width=client().width; if(width>960) { document.body.style.backgroundColor = "red"; } else if(width>640) { document. body.style.backgroundColor="green"; } else{ document.body.style.backgroundColor="blue"; } } </script>