动态调整rem基准值

假设在css样式中定义的基准值为50px；

html {font-size:50px;}

js代码如下：

 1 /*
 2     根据屏幕大小动态调整rem基准值
 3 */ 
 4 
 5 (function (doc, win) {
 6     var html = doc.getElementsByTagName("html")[0],
 7         // orientationchange->手机屏幕转屏事件
 8         // resize->页面大小改变事件
 9         reEvt = "orientationchange" in win ? "orientationchange" : "resize",
10         reFontSize = function () {
11             var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
12             if (!clientW) {
13                 return;
14             }
15             html.style.fontSize = 50 * (clientW / 375) + "px";
16         }
17     win.addEventListener(reEvt, reFontSize);
18     // DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
19     doc.addEventListener("DOMContentLoaded", reFontSize);
20 })(document, window);

不过存在的问题是，在pad尺寸的屏幕下，通过这个代码转换后的比率会使元素高度过大，超出屏幕，要用媒体查询来重新设置pad屏幕下的各元素height：

1 @media screen and (min-width:768px){}

原文地址：https://www.cnblogs.com/cnlisiyiii-stu/p/11592824.html