flexible.js 移动端自适应 rem，源码解析，以及rem单位理解

本文链接：https://blog.csdn.net/cplvfx/article/details/137472420

源码

这段代码不知道是前端同事是从哪里拷贝过来的。

所以，我这里就不贴出处了

flexible.js是做什么的？

他是通过该变html根元素的字体大小，让页面自动缩放，更确切的说让rem控制的单位自动缩放

flexible.js

(function flexible(window, document) {
    // 获取的html 的根元素
    var docEl = document.documentElement
    // dpr 物理像素比 
    //window.devicePixelRatio 当前浏览器物流像素比
    var dpr = window.devicePixelRatio || 1

    // adjust body font size  设置我们body 的字体大小
    function setBodyFontSize() {
        // 如果页面中有body 这个元素 就设置body的字体大小
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body 的字体大小
            // DOMContentLoaded   DOM元素加载后执行
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10    设置我们 html 元素的文字大小
    function setRemUnit() {
        // html 宽度分为10等份 
        var rem = docEl.clientWidth / 10;
        if(rem > 54){
            rem = 54;
        }
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
    window.addEventListener('resize', setRemUnit)
        // pageshow 是我们重新加载页面触发的事件
    window.addEventListener('pageshow', function(e) {
        // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

你了解rem吗？

推荐文章

CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】_css vh-CSDN博客

1.什么是rem

相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

rem是CSS3新增的一个相对单位，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

2.rem 与 px 的计算关系

rem的值是px的倍数

默认情况下font-size = 16px,那么1rem = 16px

rem 如何修改与px的相对计算关系

我们可以在并且只能在html标签（因为html节点是根节点，就是rem里面的r：root）里面修改font-size : 32px，从而1rem = 32px

代码

 /* rem的用法 */ 
html{ 
font-size:16px;  // 1rem = 16px 
} 
 
.div-rem{ 
width: 10rem;    // 10rem = 10 x 16 = 160px 
height: 10rem;   // 10rem = 10 x 16 = 160px 
font-size: 1rem; // 1rem = 16px 
background-color: #a58778; 
}

(另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)

原文链接：https://blog.csdn.net/cplvfx/article/details/125402868

3.使用rem注意事项

注：需设置meta缩放比1:1

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=no, minimum-scale=1, initial-scale=1,target-densitydpi=low-dpi" />

不懂的可以看这篇文章

前端HTML的meta设置-前端必看_cplvfx的博客-CSDN博客

【重要】如果你了解rem，那么你就发现了flexible.js的问题

很重要的一句话

rem是相对根节点html的字体大小来计算；

rem是相对根节点html的字体大小来计算；

rem是相对根节点html的字体大小来计算；

那么，上面代码中的这段代码是可有可无的，

因为只需要计算html字体大小即可，不需要计算body的字体大小，

所以，使用过程中，我们没有注释这段代码

    // adjust body font size  设置我们body 的字体大小
    function setBodyFontSize() {
        // 如果页面中有body 这个元素 就设置body的字体大小
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body 的字体大小
            // DOMContentLoaded   DOM元素加载后执行
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();