JS实现媒体查询

项目中用到rem作单位，须要设置根元素html的fontSize，而且须要媒体查询适配不一样屏幕。
有个特殊需求，须要将项目嵌入其余项目，而且此时去掉媒体查询，独立运行时仍然须要。所以不能直接用CSS写媒体查询，须要用JS控制添加。
CSS实现：

@media screen and (max-width: 1280px) {
    html {
        font-size: 16px;
    }
}
@media screen and (max-width: 1366px) {
    html {
        font-size: 18px;
    }
}
@media screen and (max-width: 1580px) {
    html {
        /*开发/经常使用屏幕下设置为20px，方便换算*/
        font-size: 20px; 
    }
}
@media screen and (min-width: 1581px) {
    html {
        font-size: 22px; 
    }
}

JS实现

// 建立查询列表
let mql = [
    window.matchMedia('(max-width: 1280px)'),
    window.matchMedia('(max-width: 1366px)'),
    window.matchMedia('(max-width: 1580px)')
]
// 定义回调函数
function mediaMatchs () {
    let html = document.getElementsByTagName('html')[0]
    if (mql[0].matches) {
        html.style.fontSize = '16px'
    } else if (mql[1].matches) {
        html.style.fontSize = '18px'
    } else if (mql[2].matches) {
        html.style.fontSize = '20px'
    } else {
        html.style.fontSize = '22px'
    }
}
// 先运行一次回调函数
mediaMatchs()
// 为查询列表注册监听器，同时将回调函数传给监听器
for (var i = 0; i < mql.length; i++) {
    mql[i].addListener(mediaMatchs)
}

参考：MDN文档matchMedia