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

2021-12-02 17:18:01 +08:00
 ciming
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)
    }
}
1456 次点击
所在节点    程序员
7 条回复
dapang1221
2021-12-02 17:21:50 +08:00
关键词:媒体查询
ciming
2021-12-02 17:24:01 +08:00
@dapang1221 这个我知道,主要是 font-size 的公式
zxcslove
2021-12-02 17:30:53 +08:00
百度一下 css3 的 vw 和 vh ,还有 calc 就可以了,就是百分比和像素放一起加减乘除。
shuxhan
2021-12-02 17:35:06 +08:00
calc 支持动态运算,挺好用的
hgc81538
2021-12-02 17:38:17 +08:00
ciming
2021-12-02 18:06:27 +08:00
@hgc81538 感谢
gausszhou
2022-08-16 08:38:46 +08:00
@hgc81538 cool

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/819593

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX