起点国际站移动端 css 响应式代码，能说明下计算原理吗

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1079 天前的主题，其中的信息可能已经有所发展或是发生改变。

html {
  background-color: #fff;
  font-size: 16px;
  font-size: calc(100% + 2 * (100vw - 360px) / 39);
  font-size: calc(16px + 2 * (100vw - 360px) / 39);
  line-height: 1.5
}

@media screen and (min-width: 414px) {
    html {
        font-size:calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586)
    }
}

@media screen and (min-width: 750px) {
    html {
        font-size:calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000)
    }
}

7 条回复 • 2022-08-16 08:38:46 +08:00