![]() ![]() When the height or width of the viewport is changed, they are scaled accordingly. When the browser window is resized, the font doesn’t adjust itself according to the new viewport size. The support is there in Chrome 20+ / Safari 6+, but it fails in one rather significant way. Or here’s a GIF for a super simple header: Bugs! Here’s a video of a simple layout using vw units for the font-size.Ĭheck out the demo yourself (see browser support). Which is basically what we do anyway, right?ġvmax = 1vw or 1vh, whichever is larger Using them I find you just need to tweak around with the values to get it how you want it. If the viewport is 40cm wide, 1vw = 0.4cm.įor use with font-size, I guess it’s one “letter” that takes on that size, but as we know, in non-mono-spaced fonts the width of a letter is rather arbitrary. “Viewport” = browser window size = window object. One unit on any of the three values is 1% of the viewport axis. Like your classic Trent Walton style blog post.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |