关于rem适配的自我小记

rem是根元素字体的单位，只受html的font-size影响，1rem = 1 html的font-size 利用rem来达到适配的效果，有两种方法：

①利用查询设配+rem进行适配

②利用js+rem进行适配

两种适配方法相比较，第一种更为直接，利用测量工具测量出来后换算一下就可以用代码实现适配，但是面对很多不同大小的屏幕需要适配时，就会显得麻烦。第二种方法相较于这种情况就较为简便，他利用js代码求得当前屏幕的大小，不需要借助外在的查询测量工具，只利用代码就可以实现适配。

第一种代码示例：

 *{ margin: 0;padding: 0; }
    @media only screen and (width:750px) { html{ font-size: 100px; } }
    @media only screen and (width:375px) { html{ font-size: 50px; } }
    @media only screen and (width:320px) { html{ font-size: 42.6666px; } }
    @media only screen and (width:414px) { html{ font-size: 55.2px; } }
    
    .title{ font-size: 0.75rem; }
    img{ width: 3.75rem; }

第二种代码的示例：

 let docEle = window.document.documentElement; // 表示获取窗口

    // 此函数是计算不同屏的html标签的font-size
    function refresh(){
        // width 表示手机屏的宽度
        let width = docEle.getBoundingClientRect().width; // 一屏的宽度 
        if(width>750){  width=750 }
        let fs = width / 7.5
        document.querySelector("html").style.fontSize = fs + "px"
    }

    refresh();  

    // window叫事件源   addEventListenere用来绑定事件的
    // resize叫浏览器窗口大小改变事件  ()=>{}叫事件监听器
    window.addEventListener("resize",()=>{
        refresh()
    })
    // pageshow 页面显示出来
    window.addEventListener("pageshow",()=>{
        refresh()
    })