动态font-size媒体查询
@media srceen and (min-width: 320px) { html { font-size: 20px; } }
@media srceen and (min-width: 375px) { html { font-size: 24px } }
.box { width: 5rem; height: 5rem; }
<script>
function setRemUnit () {
const htmlWidth = htmlEl.clientWidth // 拿到视口宽度
const htmlFontSize = htmlWidth / 10
htmlEl.style.fontSize = htmlFontSize + 'px'
}
const htmlEl = document.documentElement //拿到html实例
setRemUnit()
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
</script>