lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans"
      rel="stylesheet"
    />
    <title>VW, VH Example</title>
  </head>
  <body>
    <div class="box-width">50% of the viewport width (50vw)</div>
    <br />
    <div class="box-height">25% of the viewport height (25vh)</div>
  </body>
</html>

# Viewport

The `Viewport` refers to the visible area of a web page that a user can see.

The viewport can be set within the HTML `<meta>` tag, located inside the HTML head element.

<br />

## Example of using the meta tag

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

<br />

The meta tag example provided informs the web browser how to display the web page on mobile and various screen sizes.

The code tells the web browser to set the width of the webpage to the width of the device's screen, and set the initial zoom scale to 1.

- `name="viewport"`: This `meta` tag is related to the viewport settings.

- `content` attribute:

  - `width=device-width`: Adjusts the page width to match the width of the device screen. This means the horizontal size of the webpage matches the actual width of the device.

  - `initial-scale=1.0`: Sets the initial zoom level when the page first loads. `1.0` means 100%, displaying the webpage to exactly fit the width of the screen.

<br />

## vw and vh

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

Using vw and vh units allows for flexible adjustment of element sizes according to the screen dimensions.

<br />

### vw (Viewport Width)

`1vw` means 1% of the viewport (screen) width.

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

If the total screen width is 1000px, setting an element's width to `50vw` results in the element width being 500px.

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

<br />

### vh (Viewport Height)

`1vh` means 1% of the viewport (screen) height.

If you divide the screen height into 100 equal parts, one part's height is `1vh`.

If the total screen height is 800px, setting an element's height to `25vh` results in the element height being 200px.

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

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

Viewport

Example of using the meta tag

vw and vh

vw (Viewport Width)

vh (Viewport Height)

Questions about vw and vh units