移動端響應布局rem · javascript

[TOC] ### 思想：(為手機而生) ~~~ 在手機端網站實現自適應效果使用rem代替之前代碼當中的px 實現自適應原理是通過引入JavaScript代碼然后根據設備的寬度來動態的設置 font-size的大小從而確定1rem的值也可以使用JavaScript原生代碼實現動態復制參看 ~~~ [另一種方法](http://www.softwhy.com/article-8545-1.html) ### 實質： ~~~ 將布局視口的寬度分成十等分每一份就是1rem 且1rem=font-size的px值 ~~~ ### 使用方法： ~~~ 1. 引入<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script> 替換  ~~~ ~~~ 2. 在 vccode 的sccrem插件中點擊文件>首選項中搜索cssrem 設置"cssrem.rootFontSize": 64 值根據具體情況確定（布局視口的寬度 640 就是64 布局視口的寬度750 就是75） ~~~ ### demo： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin:0;padding:0} /* rem是相對于根元素,html的font-size而言 1rem=1rem (640) iphone7 vw=10rem 1rem=.853333rem(540) iphone5 vw=10rem 1rem=1.656rem iphone6plus vw=10rem */ /* flexible-->將布局視口的width等分成10rem; */ #app{ width:10rem; margin-left: auto; margin-right: auto; } .demo{ width: 5rem ; height: .266667rem; background: red; } </style> </head> <body> <div id="app"> <div class="demo"> </div> </div> <script> // 布局視口的width var vw = document.documentElement.clientWidth; //設備width var dw = screen.availWidth; // 設備像素比 var dpr = window.devicePixelRatio; console.log("vw:"+vw); console.log("dw:"+dw); console.log("dpr:"+dpr) </script> </body> </html> ~~~ ## [另外一種方法](http://www.softwhy.com/article-8545-1.html)