![]() ![]() Audi Type has received an iF Communication Design Award in 2011. You can use this font for personal purpose.Viewport-relative units (vw, vh, vmin, vmax) are a new set of dynamic CSS units for sizing elements. They’re called “viewport-relative” because they eliminate dependency on parent elements and allow sizing based on the viewport size. This makes them a handy unit for defining font sizes and building fluid layouts. I like to use the vw (viewport width) unit on large headlines-I’ll usually fiddle with the font-size value until it looks right. When we use the vw unit, 1vw is equal to 1% of the viewport width.īut what if we could define a pixel-based value, then have Sass convert it to a flexible vw value? In this article, we’ll see how we can create viewport-relative headlines out of pixel units. So if an element’s font-size value is set to 1w, it means that if the browser is 1000px wide, the element’s computed font-size value is 10px. ![]() Next, we’ll create a Sass function that gets the context value in pixels: get-vw ( $target ) Ĭheck out one of the examples on CodePen: To convert a px value to vw, we’ll need a pixel-based context equal to 1% of some value-let’s use 1% of 1000 (1000 *. ![]() See the Pen px to vw by Guil H ( on CodePen.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |