font-size: calc(100vw / 3.75);
}
body {
font-size: .14rem;
}
效果如下：
11. 滑动穿透
当你想在出现遮罩的时候，锁住用户的滚动行为，你可以这么做。
假设HTML结构如下：
<div class="mask">
<div class="content">我是弹框</div>
</div>CSS样式如下：
.mask {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba($color: #333, $alpha: .6); .content {
padding: 20px;
background-color: #fff;
width: 300px;
}
}
效果如下：
可以看到，当在遮罩上滑动的时候，是会穿透到父节点的，最简单的办法就是阻住默认行为：
document.querySelector(".mask").addEventListener("touchmove", event => {
event.preventDefault();
});如果在vue中，你可以这么写：
<div class="mask" @touchumove.prevent></div>如果.content也有滚动条，那么只要阻止遮罩本身就行：
document.querySelector(".mask").addEventListener("touchmove", event => {
if (event.target.classList.contains("mask")) event.preventDefault();
});或者：
<div class="mask" @touchumove.self.prevent></div>这样，当出现遮罩的时候用户的滑动就会被锁住啦
