Viewport Responsive Unit

use vrwd class with vw, vh, vmin together to manage responsive font size for element

Basic

format

vrwd

Example

Hello Viewport font size

<div class="vrwd">Hello Viewport font size</div>

Advanced

By default the basic value of vrwd is 16, you can adjust the basic value to enlarge or scale down the font size by css variable --maju-vrwd

format

vrwd + --maju-vrwd

Example - style

Hello Viewport font size

<div class="vrwd" style="--maju-vrwd: 20">Hello Viewport custom basic value</div>

Example - css

Hello Viewport font size

<div class="welcome vrwd">Hello Viewport font size</div>

.welcome {
  --maju-vrwd: 20;
}