问基于窗口大小相对缩放文本，同时支持浏览器缩放
EN

Stack Overflow用户

提问于 2021-03-25 05:16:50

回答 1查看 14关注 0票数 0

如果我在CSS中将字体大小设置为基于正文/窗口大小..

font-size: min( 1.5vh, 0.9vw );

..it工作得很好，因为文本会随着最小的轴缩小而缩小。然而，它完全无效浏览器缩放，因为我没有使用任何绝对磅大小来设置我的字体大小。做这两件事最好的方法是什么？我尝试过几种calc()和min()的混合，但浏览器似乎不喜欢将纯数字与em或px大小相乘。

有没有办法做到这一点？我不需要精确的缩放-我只想给用户调整文本大小的能力。

html

css

回答 1

Stack Overflow用户

发布于 2021-03-25 06:33:40

如果您可以使用一行Javascript来设置您自己的font-size onload单位，那么您可以定义相对于初始vw/vh的font-size，但可以用px术语声明它，以便在用户缩放时它会缩放。

例如：

<!doctype html>
<html>
<head>
<title>Font size test</title>
<style>
body {
  font-size: var(--font-size);
}
</style>
</head>
<body>
This is some text
<script>
document.body.style.setProperty('--font-size', Math.min(0.9 * window.innerWidth / 100, 1.5 * window.innerHeight / 100) + 'px');
</script>
</body>
</html>

(您需要添加一些复杂性来设置变量onload或更改窗口大小，而不是缩放)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66789523

复制

相似问题

问基于窗口大小相对缩放文本，同时支持浏览器缩放
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于窗口大小相对缩放文本，同时支持浏览器缩放EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于窗口大小相对缩放文本，同时支持浏览器缩放
EN