CSS Viewport 单位

DONG HAO
2021-01-13 / 0 评论 / 354 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年10月27日,已超过1120天没有更新,若内容或图片失效,请留言反馈。

移动设备上的最小字体大小不应该不于14px,为标题提供最小字体大小

.title {
    font-size: calc(14px + 2vw);
}

计算它的等效的 vw

vw = (Pixel Value / Viewport width) * 100

移动端滚动问题:即使使用100vh,也会滚动,原因是地址栏的高度可见。

.my-element {
  height: 100vh; /* 不支持自定义属性的浏览器的回退 */
  height: calc(var(--vh, 1vh) * 100);
}
// 首先,我们得到视口高度,我们乘以 1% 得到一个vh单位的值
let vh = window.innerHeight * 0.01;

// 然后,将`--vh`自定义属性中的值设置为文档的根目录一个属性
document.documentElement.style.setProperty('--vh', `${vh}px`);

0

评论 (0)

取消