大家在平时工作中对于处理移动端各种设备兼容问题，都已经有了自己的解决办法，而网络上各类的插件也非常的多。其中有一款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文件，就可以使用屏幕自适应。
有写不对的地方请大家提出来，后续也会将此文章进行更新、修正，请持续关注！
