본문으로 건너뛰기

vw and vh

Viewport

The viewport refers to the area of the webpage that the user can see.

You set the viewport in HTML using the <meta> tag within the head element of the HTML.

Example:

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

The above HTML code informs the web browser how the web page should be displayed on mobile and devices with various screen sizes.

This code means to adjust the width of the web page to fit the screen width of the device, and set the initial zoom/scale factor to 1.

  • name="viewport": This meta tag indicates that it is related to viewport settings.

  • content attribute:

    • width=device-width: This instructs the page width to match the current device's screen width. That is, it makes the width of the screen correspond to the actual width of the device.

    • initial-scale=1.0: This sets the zoom level when the page is first loaded. 1.0 represents 100%, meaning it displays the webpage precisely according to the screen width.


vw and vh

vw (Viewport Width) and vh (Viewport Height) are units based on the width and height of the viewport, respectively.

By using these units, you can dynamically adjust the size of elements according to the screen size.


vw (Viewport Width)

1vw represents 1% of the viewport width.

If you divide the width of the screen into 100 equal parts, one part's width is 1vw.

  • Example:

    If the full width of the screen is 1000px, setting an element's width to 50vw will make the width of that element 500px.

    CSS
    .box {
    width: 50vw;
    }

vh (Viewport Height)

1vh represents 1% of the viewport height.

When you divide the height of the screen into 100 equal parts, the height of one part corresponds to 1vh.

  • Example:

    If the total height of the screen is 800px, setting an element's height to 25vh means that the element's height will be 200px.

    CSS
    .box {
    height: 25vh;
    }


Usage Tips

  • Using vw and vh allows you to easily create responsive designs that adjust size automatically based on the screen size.

  • However, they are not suitable for all situations. Since elements might not appear as intended on certain screen sizes, it's good to thoroughly test before using them.