编程大白话之-flexible.js工作原理

大家在平时工作中对于处理移动端各种设备兼容问题，都已经有了自己的解决办法，而网络上各类的插件也非常的多。其中有一款flexible.js（移动端自适应布局）。

相信大家对这个都不陌生，下载插件后，直接在html中引入js及css文件后，在scss中进行设置后便可以轻松的进行使用，但是 如果我们没有插件的时候，需要自己去手动进行设置，该怎么写呢？下面我们一起来看一下：

使用这个插件的目的就是为了将px单位转换为rem，也就是将一个固定的单位值变为一个可以适应各种屏幕大小的单位。
rem是根据根元素HTML的值变化的，所以只要我们确定了HTML的字号大小，那么rem便可以跟随其改变。

 resizeFz();
        function resizeFz() {
            document.documentElement.style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth) / 10 + 'px';
        }
document.body.style.fontSize = '16px';

代码中我们可以看到设置的HTML的字体是将视口的宽度除以10后，以每一份为基准值，(body字体设置为了16px，如果不设置，字体大小会根据屏幕的大小而变化，)然后我们到scss中设置rem，我们以750px设计稿为例

@function px2rem($px, $rem: 75) {
    @return $px / $rem * 1rem;
}

通过这个简单的方法，在不考虑其他问题的情况下，就已经可以进行使用 px2rem(）中传的值，为设计稿量到的值，直接填写就可以。

.content {
    width: px2rem(200);
    height: px2rem(100);
    background-color: #f33f40;
}

Han.PNG

如果我们就这样进行使用，肯定是会有很多问题存在的，我们也需要考虑到抖屏、内存、兼容等一系列问题。

resizeRootFz();
    function resizeRootFz() {
        // 设置html的font-size = 视口宽度 / 10
        document.documentElement.style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth) / 10 + 'px';
    }
    var timer = null;
        // 监听视口宽度
    window.addEventListener('resize', function() {
        // 优化方案：
        // 1.函数防抖，(主要用于onscroll、onresize高频率触发事件)，屏幕一直动会一直触发函数，会导致性能降低，所以采用性能优化节流
        if(timer) {     // 如果有定时器，将其清除
            clearTimeout(timer);
            timer = null;
        }
        // 开启新的定时器
        timer = setTimeout(function () {
            resizeRootFz();     
            clearTimeout(timer);
            timer = null;
        }, 3000)



        // 2.函数节流: 在一定时间内，只会执行一次，(在一定时间内执行第一次)
        window.onresize = function() {
            if(timer) return;
            timer = setTimeout(function() {
                resizeRootFz();
                clearTimeout(timer);
                timer = null;
            }, 300)
        }
    })

虽然很多地方写的不够全面以及严谨，通过自己简单的设置不需要引入js文件，就可以使用屏幕自适应。

有写不对的地方请大家提出来，后续也会将此文章进行更新、修正，请持续关注！