lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# Viewport

The `viewport` refers to the visible area of a web page that the user sees, and it is configured within the HTML head element using the `<meta>` tag.

Let's quickly review the concept of the viewport that we learned in our HTML course.

 

## Example of using the meta tag

```html title="Adding a meta tag in the HTML head tag"
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
```

 

The meta tag code above informs the web browser how to display the web page on mobile and various screen size devices.

- `name="viewport"` indicates that this `meta` tag relates to viewport settings.

- The `content` attribute lists values that describe the viewport settings, separated by commas.

- `width=device-width` directs the page to match its width to the current device's screen width, ensuring that the horizontal size of the page aligns with the device's actual width.

- `initial-scale=1.0` sets the zoom level when the page first loads.

- `1.0` means 100%, accurately displaying the webpage to fit the screen width.

 

## vw and vh

`vw` and `vh` are units based on the viewport's width and height.

By using vw and vh units, you can flexibly adjust the size of elements according to the screen size.

 

### vw (Viewport Width)

`1vw` represents 1% of the viewport's (screen) width.

When you divide the screen's width into 100 equal parts, one part's width equals `1vw`.

If the full width of the screen is 1000px and you set an element's width to `50vw`, the width of that element becomes 500px.

```css title="Example of using the vw unit"
.box {
 width: 50vw; /* 50% of the screen width */
}
```

 

### vh (Viewport Height)

`1vh` represents 1% of the viewport's (screen) height.

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

If the full height of the screen is 800px and you set an element's height to `25vh`, the height of that element becomes 200px.

```css title="Example of using the vh unit"
.box {
 height: 25vh; /* 25% of the screen height */
}
```

Since the vw unit is based on the viewport's width, you need to calculate 30% of the total screen width. 30% of 1200px is 360px.

### What is the most appropriate answer to fill in the blank?