You can use
<p>HELLO
WORLD
YOU ROCKS</p>
<style>
p{
font-size:20vh;
line-height: 18vh;
}
</style>
Solution 1 :
Solution 2 :
limiting it to CSS using @media would likely be the easiest solution, create a rule for the popular screen-heights and change the font-size to a size you prefer:
@media only screen and (max-height: 600px) {
#div {
font-size: 80%;
}
}
Solution 3 :
Responsive Text
Resize the browser window to see how the text size scales.
Use the “vw” unit when sizing the text. 10vw will set the size to 10% of the viewport width.
Problem :
Is it possible to scale font size based on screen height with only CSS?
For example, I have a sentence like this:
HELLO
WORLD
YOU ROCKS
Using this as my home page title and it is sitting inside a div that with 100vh.
What’s is the calculation to make sure this text will scale and fit inside the div height? And if this is viewing in portrait mode, the font size will also keep to the max-width.
Comments
Comment posted by Mr Lister
Yes, you can also specify