移动端响应布局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)