1.px (Pixels)
Pixels are the traditional building blocks of web design. If you set an item's width to 300px, it will stay exactly 300 pixels wide whether a user views it on a tiny smartphone or a massive desktop monitor.
2.vw (Viewport Width)
The "viewport" is simply the visible area of the browser window. 1vw is equal to 1% of the viewport's total width.
Example: If a browser window is 1200px wide, 10vw evaluates to 120px. If the user resizes the browser down to 600px, that same 10vw immediately shrinks to 60px.
3.vh (Viewport Height)
Similar to vw, 1vh is equal to 1% of the viewport's total height.
Example: If you want a striking hero image to perfectly fill the user's screen right when they land on your site, you can set its height to 100vh. It will fill the screen vertically whether they are on a tall monitor or a landscape tablet
Top comments (0)