标签：style doc width window 设置 rem docEl 动态

rem

适配原理

原理：是相对于根元素的font-size计算值的倍数

计算方式：屏幕宽度/设计稿宽度*基本宽度=fontsize

使用：通过rem+js改变根元素font-size来实现兼容性更高的页面

使用JavaScript来动态修改根元素的大小，其他的rem单位会被浏览器转换成px。
本质：等比缩放，一般给予宽度

缺点：在响应式布局中，必须通过js动态控制字体大小，css和js代码有一定的耦合性，将必须改变字体的代码放在css之前。

最简单的rem配置

function rem(){
        document.documentElement.style.fontSize=document.documentElement.clientWidth / 7.5 + 'px';
    }
    rem();
    window.onresize = rem;

具体的动态设置rem（上班的就可以用）

动态配置rem其实就是在窗口大小改变时重新设置rem的值

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function() {
            if (docEl.clientWidth > 750) {
                docEl.style.fontSize = "100px";
                doc.getElementById("app").style.width = "750px";
            } else {
                var width = docEl.clientWidth / 7.5;
                docEl.style.fontSize = width + "px";
                doc.getElementById("app").style.width = "auto";
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

标签：style,doc,width,window,设置,rem,docEl,动态
来源： https://blog.csdn.net/weixin_53212464/article/details/112636561

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。