动态调整rem基准值

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

html {font-size:50px;}

 

 

remEvent.js代码如下：

/*
    根据屏幕大小动态调整rem基准值
*/ 

(function (doc, win) {
    var html = doc.getElementsByTagName("html")[0],
        // orientationchange->手机屏幕转屏事件
        // resize->页面大小改变事件
        reEvt = "orientationchange" in win ? "orientationchange" : "resize",
        reFontSize = function () {
            var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
            if (!clientW) {
                return;
            }
            html.style.fontSize = 50 * (clientW / 375) + "px";
        }
    win.addEventListener(reEvt, reFontSize);
    // DOMContentLoaded->dom加载完就执行,onload要dom/css/js都加载完才执行
    doc.addEventListener("DOMContentLoaded", reFontSize);
})(document, window);

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

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

 

---

 

这里还遇到了一个问题！在引入这个js文件的时候一开始写成这样：

　　<!-- 根据屏幕大小动态设置rem基准值 -->
    <script type="text/javascript" src="/js/remEvent.js" charset="utf-8"></script>

导致不在本机电脑的Live Server环境下打开，屏幕就不适配。原因是文件的路径引用出错，去掉第一个‘/’，改成如下：

    <!-- 根据屏幕大小动态设置rem基准值 -->
    <script type="text/javascript" src="js/remEvent.js" charset="utf-8"></script>