Advertisements
How to Scale Font Size Based on the Viewport Width Using CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS vw Unit
You can simply set the value of the font-size property in vw (viewport width) units to make it responsive, i.e. scaling the font size based on the width of the viewport.
Let's try out an example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Font Scaling Based on Width of the Viewport</title>
<style>
h1{
font-size: 2em; /* fallback value */
font-size: 6vw;
}
</style>
</head>
<body>
<h1>This is a Responsive Heading</h1>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to auto resize an image to fit into a DIV container using CSS
- How to stretch and scale an image in the background with CSS
- How to make body to have 100 percent of the browser height
Advertisements
