console 命令行工具 X clear

console

// 创建查询列表
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)
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>
看我七十二变
</div>

</body>
</html>

div{
    width: 100vw;
    height: 100vh;
    background-color: var(--bg_color);
}
:root{
    --bg_color:#ffccdd;
}
@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; 
    }
}