This allows for a more dynamic typographic scale on larger screens, while keeping fonts constrained on a mobile device – no media-queries required. Use higher viewport values on headings, and watch them grow more quickly than the surrounding text. We can combine a base size in more steady units (say 16px) with a smaller viewport-relative adjustment ( 0.5vw), and let the browser do the math: calc(16px + 0.5vw)īy changing the relationship between your base-size and viewport-relative adjustment, you can change how dramatic the growth-rate is. We need something more subtle, with minimums and maximums, and more control of the growth rate. This direct scaling is clearly too dramatic for daily use. As you can see, fonts scale very quickly – adjusting from unreadably small to extra large in a very small range. Using simple viewport units for font-size has an interesting (dangerous) effect. It’s become very popular to use viewport units for responsive typography – establishing font-sizes that grow and shrink depending on the current viewport size. Let’s see what we can do! Responsive Typography While these units are derived from viewport height or width, they can all be used everywhere lengths are accepted – from font-size to positioning, margins, padding, shadows, borders, and so on. Sadly, and strangely, vmax units are not yet available on Internet Explorer or Edge. 10vmax will resolve to 10% of the current viewport height in portrait orientations, and 10% of the viewport width on landscape orientations. Viewport Maximum ( vmax) – A percentage of the viewport width or height, whichever is larger.10vmin will resolve to 10% of the current viewport width in portrait orientations, and 10% of the viewport height on landscape orientations. Viewport Minimum ( vmin) – A percentage of the viewport width or height, whichever is smaller.10vh will resolve to 10% of the current viewport height. Viewport Height ( vh) – A percentage of the full viewport height.A % length is relative to local context (containing element) width, while a vw length is relative to the full width of the browser window. The difference between % and vw is most similar to the difference between em and rem. 10vw will resolve to 10% of the current viewport width, or 48px on a phone that is 480px wide. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |