CSS分辨率适配

前言

随着手机类型，手机型号的不断泛滥，大大的增加了前端的开发工作量；尤其是在界面布局的时候；
在使用css布局的时候，我们一般使用pt（像素）来设置高度、间距、字体大小等属性的值；但是在不同分辨率的手机下，就会出现问题（在iPhone X下正常，在iPhone SE就会出现问题）。
这是用分辨率适配问题，就不可避免

Rem

rem是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位;

使用方式

• vue引入rem

<script type="module">
    import Rem375 from "../../js/libs/Rem375.js"
    import Rem from "../../js/libs/Rem.js"
    if (document.body.clientWidth < 768) {
        Vue.use(Rem375);
    } else {
        Vue.use(Rem);
    }
</script>

• CSS中使用Rem

// 其实就是使用rem替换pt
.meter-top {
    height: 4.4rem;
    font-size: 1.3rem;
    line-height: 4.4rem;
    display: flex;
    display: -webkit-flex;
    color: rgb(25, 179, 201);
}

• Rem的实现代码

export default {
    install(Vue, options) {
        var designWidth = 1366;
        // 这里的baseFontSize就是计算的基础单位
        var baseFontSize = 10;
        if (options && typeof options === 'object' && !isNaN(options.designWidth) && !isNaN(options.baseFontSize)) {
            designWidth = +options.designWidth;
            baseFontSize = +options.baseFontSize;
        }
        var clientWidth = document.body.clientWidth;
        document.documentElement.style.fontSize = clientWidth / designWidth * baseFontSize + 'px';
    }
}

当baseFontSize=10时，12px = 1.2rem