Hello reader,
In this blog we will discuss about,
how to manage font size in different viewport.
Usually we fix the font size with different viewport size using @media.
But as we know CSS3 has some new values. Viewport size:
vw, vh, and vmin are one of them.
How its works :-
One unit of the three value is 1% of the viewport
viewport = browser window size = window object
If the viewport is 50cm wide, 1vw == 0.5cm
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
If you use this, the object size like font size will change automatically according your viewport size.
Note: Its work with all major browser.
Note: Its not only for font-size.
h1 {
font-size: 6vw;
}
<h1>Hello</h1>
0 Comment(s)