SOURCE

console 命令行工具 X clear

                    
>
console
var design = 1000;
var base = 100;
function responsive() {
    var width = window.innerWidth;
    // 所求font-size = 当前屏幕宽度 / 设计图 * 基准值
    var size = width / design * base;
    document.documentElement.style.fontSize = size + "px";
}
responsive();
window.addEventListener("resize", responsive);
<div class="grid-container">
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
    <span class="grid-item">
        测试flex
    </span>
</div>
html,body{
    margin: 0;
    padding:0
}
.grid-container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: .1rem;
    padding: .1rem;
}
.grid-container span{
    background-color: #f00;
    color: #fff;
    height: 2rem;
    font-size: .5rem
}