To linearly scale font-size, margin, padding, etc. across viewport widths.
-
Import
_viewportscale.scssin your sass file:@import "viewportscale";
-
Now you can use the
vsmixin like this:@include vs($property, $min-viewport-width, $min-size, $max-viewport-width, $max-size);
h1 {
@include vs(font-size, 320px, 32px, 960px, 48px);
}This will be compiled to:
h1 {
font-size: 32px;
}
@media screen and (min-width: 320px) {
h1 {
font-size: calc(2.5vw + 24px);
}
}
@media screen and (min-width: 960px) {
h1 {
font-size: 48px;
}
}.container {
@include vs(padding, 320px, 16px, 960px, 24px);
}This will be compiled to:
.container {
padding: 16px;
}
@media screen and (min-width: 320px) {
.container {
padding: calc(1.25vw + 12px);
}
}
@media screen and (min-width: 960px) {
.container {
padding: 24px;
}
}