如何仅使用 CSS 使字体大小适应可变 div 大小

发布于 2025-01-18 12:31:34 字数 988 浏览 1 评论 0原文

有类似的问题具有CSS的div宽度？哪个具有误导性标题，因为它在示例中证明其div大小取决于视口大小，因此他们的解决方案就是简单地使字体大小也取决于视口大小。但是，我的DIV大小在px中，并且可能随时更改。如何仅通过使用CSS来相应地调整字体尺寸？

不幸的是，％中字体大小的值对应于母体字体大小，而不是父容器大小。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
</head>
<style>
html, body {
  margin: 0;
  padding: 0;
  background-color: red;
}
div#content {
  margin: 0;
  padding: 0;
  background-color: blue;
  width: 100px; /* this might change at any time */
  font-size: 200%;
}
</style>
<body>
<div id="content">Text</div>
</body>
</html>

原文

There is a similar question
Is it possible to adapt font size to div width with CSS? which has a misleading title because it turns out in their example their div size depends on the viewport size, so their solution is to simply make font size dependent on the viewport size, too. However, my div size is in px and might change at any time. How do I adjust it's font size accordingly by using CSS only?

Values for font size in % unfortunately correspond to the parent font size, not to the parent container size.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
</head>
<style>
html, body {
  margin: 0;
  padding: 0;
  background-color: red;
}
div#content {
  margin: 0;
  padding: 0;
  background-color: blue;
  width: 100px; /* this might change at any time */
  font-size: 200%;
}
</style>
<body>
<div id="content">Text</div>
</body>
</html>

分享到QQ

分享到微博