<!DOCTYPE html> <html class="mobile"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .mobile #div1{ background: skyblue; } .pc #div1{ background: pink; } .pad #div1{ background: salmon; } .iphone #div1{ background: yellow; } .android #div1{ background: seagreen; } #div1{ height: 100px; } </style> </head> <body> <div id="div1" > </div> <script type="text/javascript"> var html = document.querySelector('html') function resize(){ var screneLength = window.innerWidth; html.style.fontSize = window.innerWidth/7.5 + 'px' if(screneLength>640&&screneLength<960){ html.className = 'pad' }else if(screneLength>=960){ html.className = 'pc' }else{ html.className = 'mobile' } if(navigator.userAgent.indexOf('Android')!==-1){ html.className = html.className + ' android' }else if(navigator.userAgent.indexOf('iPhone')!==-1){ html.className = html.className + ' iphone' }else if(navigator.userAgent.indexOf('iPad')!==-1){ html.className = html.className + ' ipad' } } resize() window.onresize = function(e){ resize() } </script> </body> </html>