js响应式
rem辅助响应式布局：其实就是指在HTML页面的大小不断变化的时候，里面的宽、高、字体等等也随之变化，主要是通过获取window.innerwidth的值来进行判断，7.5rem===100%===750px。
js响应式：就是通过navigator.userAgent.indexOf('Android')来获取不同的客户端版本，例如‘Android’,然后使用 window.resize()=function(){} 返回不同样式给客户端.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } #div1{ /*7.5rem===100%*/ width: 3.75rem; height: 1rem; background: skyblue; font-size: .7rem; } </style> </head> <body> <div id="div1"> helloworld </div> <script> // window.innerWidth === 768 === 7.5 // ?1rem === 768/7.5 === 1.x // //html字体大小最小是10px,再小就不行。 var html = document.querySelector('html') html.style.fontSize = window.innerWidth/7.5 + 'px' window.onresize = function(e){ console.log(e) console.log(window) html.style.fontSize = window.innerWidth/7.5 + 'px' } </script> </body> </html>
<!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; } #div1{ height: 100px; } .iphone #div1{ background: yellow; } .android #div1{ background: seagreen; } </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>