vcalc is an Sass function for calculate unit from px to vw or vmin.
$ npm install --save-dev vcalc
@import 'vcalc';
Set variable $base-v-size
as you want, default sets 375
(iPhone6).
$base-v-size: 320;
Name | Arg1 | Arg2 |
---|---|---|
vmin-calc | $values: px based value | $base: base viewport size |
vw-calc | $values: px based value | $base: base viewport size |
// $base-v-size: 375;
{
font-size: vmin-calc(16px);
}
Will be 4.26667vmin
, which means
Screen width | 4.26667vmin In px |
---|---|
414px | 18px |
375px | |
320px | 14px |
Also can pass multiple values
{
margin: vmin-calc(10px 20px 30px 40px);
}