How to adapt font size to variable div size with CSS only

1 year ago

#365271

finefoot

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>

html

css

layout

viewport

font-size

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs