The relative units are vw, vh and vmin. Scss examples

The relative units are vw, vh and vmin.  Scss examples

vw

vw is one kind of relative unit and it is defined as 1/100 viewport. Or, more simply, this view depends on the width of the screen. 100vw is the width of the entire screen.

In this example, we see that we have set 23vw for each of the blocks, which is almost a quarter of the screen. If we remove the padding and set it to 25vw, then 4 blocks will actually occupy the entire width of the screen. By the way, there is just an interesting feature about how to make square blocks (as they like in portfolio sites).

vh

The essence of vh is similar to vw, but the calculation is based on the height of the device.

An example of using this method is if you need to make the first block (or all) of the site for the device. Next, let’s look at an example with scss functions.

vmin

1vmin equals 1% of the minimum width or height of the viewport. It is most convenient to use these units of measure in a mobile phone, of course. vw and vh will give too small values. Further, we will consider some more examples.

SCSS functions

Now the fun part of this article is the use of functions. By the way, they can be written in sass as well, no problem.

@function vw($value, $size: 1920) {
@return $value / $size * 100vw;
}

Actually, the function. This function is responsible for vw. We see the variable $size, the value of which 1920… This is the width of the layout. Suppose you were given a layout for layout with a width of 1440 – you enter 1440 here. And if the font size in the layout, for example, is 10 pixels, we actually put font-size: vw(10); Thus, at 1440 (established $size) will be the font size 10, and larger / smaller will be larger or smaller, respectively. It is extremely convenient in terms of adapting to different desktops – from 1025 to 1920, or even higher.

Actually, with the vh-function, the essence is the same. But the scope is narrower.

@function vh($value, $base: 768) {
@return $value / $base * 100vh;
}

Here the essence is the same, but a slightly different function. And use – according to the situation, if the site is made by design in such a way that it necessarily depends on the height – we use vh. It is important that when developing a site, you naturally need to set the height in the browser, which was set in the function, so that vh(10) looked like 10px.

And the last thing is vmin. It is worth using it, as I said, for mobile devices.

@function vmin($value, $base: 375) {
@return $value / $base * 100vmin;
}

In fact, the essence of the function is exactly the same. If mobile layout is 375 – set 375 and use vmin(10), eg.

Actually, this is the most important information on these units + use in the context of the scss preprocessor. I recently started using these functions, but I will say unequivocally – with them much it is more pleasant to make up. If you do everything right, you have great responsiveness for any device width.

Hope you found it helpful. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *