The font size can be set with vw (viewport) unit, which means the viewport width. The viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm. That way the font size will follow the size of the browser window.
Syntax:
element { font-size: #vw; // CSS Property }
Where # is a number relative to the container size.
Example 1:
<!DOCTYPE html> < html > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < head > < title >Font Scaling</ title > < style type = "text/css" > h1 { color: green; font-size:8vw; text-align: center; } div p { font-size: 5vw; text-align: center; } #st{ font-size: 3.5vw; text-align: center; } p{ font-size: 15px; text-align: center; } </ style > </ head > < body > < h1 >GeeksforGeeks</ h1 > < div > < p >Resize the browser window to see how the font size scales.</ p > </ div > < p id = "st" >Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</ p > < p >Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</ p > </ body > </ html > |
Output:
Example 2: Media queries can be used to change the font size of an element on specific screen sizes.
<!DOCTYPE html> < html > < head > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title >Font Scaling</ title > < style > h2 { text-align: center; } div.example { background-color: lightgreen; padding: 20px; text-align: center; } @media screen and (min-width: 601px) { div.example { font-size: 40px; } .a{ font-size: 25px; text-align: center; } } @media screen and (max-width: 600px) { div.example { font-size: 30px; } .a{ font-size: 18px; text-align: center; } } @media screen and (min-width: 800px) { div.example { font-size: 60px; } .a{ font-size: 35px; } } </ style > </ head > < body > < div class = "example" >Font size automatically adjusting according to the width of the container</ div > < p class = "a" >Change the width of the browser window to see the font scaling automatically according to the container size.</ p > </ body > </ html > |
Output:
Note: Change the size of the browser window to see the changes in the font size.
leave a comment
0 Comments