console
var design = 1000;
var base = 100;
function responsive() {
var width = window.innerWidth;
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
}