rem实现自适应布局

前言

作为一个前端开发首先要解决的问题便是怎样让自己写的页面能够适配不同大小的屏幕，其中一种比较好用的方法就是rem。废话少说直接告诉你怎样适配，几步便可。

---

一、使用步骤

1.打开项目入口文件index.html,添加如下js

<script>
    // px和rem转换
    ;(function(win) {
        function refreshRem() {
            let wW = document.documentElement.clientWidth||document.body.innerWidth||document.body.clientWidth||window.screen.width||window.screen.availWidth||document.body.clientWidth; // 窗口宽度
            let designSize = 1920; // 设计图尺寸
            let rem = wW / designSize;
            document.documentElement.style.fontSize = rem + 'px';
        }

        // f12改变窗口大小调试的时候方便
        win.addEventListener('resize',function() {
            refreshRem();
        });

        refreshRem();
    })(window);
</script>

注意：1）代码中let rem = wW / designSize;wW不用乘以100,这样写后面直接在css中将px替换成rem即可，不然还要换算

           2）这里是pc端1920分辨率的设计稿，实际根据设计稿尺寸自行设定，比如移动端375

2.将代码中的px全部换成rem

<style lang="less" scoped>
.header {
    position: relative;
    height: 80rem;
    >.logo {
        position: absolute;
        top: 7rem;
        left: 360rem;
        width: 337rem;
        height: 67rem;
    }
}
</style>

我这里用了预处理器less，实际上就是替换所有px

总结

1）除了rem外，还可以通过scale缩放、百分比布局来适配，我都试过，缩放会导致模糊，事件热区偏移，留白等问题，百分比布局又不好精确把握设计稿尺寸，就这个最好用。

2）有一种场景存在问题，比如官网，在大尺寸下展示的都很完美，但现在移动端设备很方便，在大尺寸1920适配移动端的时候微信浏览器、qq浏览器、百度浏览器排版会错乱，原因是这些浏览器没有取消最小字体12px的限制，字太大了，这没办法只能等它们取消这个限制了。