Skip to content

Commit

Permalink
Merge pull request #228 from brechtDR/feature/update-viewports-unit-a…
Browse files Browse the repository at this point in the history
…rticle

Update viewports unit article
  • Loading branch information
sanderdejong88 authored Feb 9, 2024
2 parents 22d8236 + 093233d commit c6b51e0
Showing 1 changed file with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ If you read the previous article in this series, you might’ve remembered that

The `vw` unit stands for viewport width. But let’s start off with a catch right away. There are multiple things that we point at when talking about the viewport.

**The layout viewport** is the visible area of a web page influenced by the browser window or device screen size. It determines the space available for rendering HTML content. If you positioned a fixed box around the window, that’s the viewport we’re talking about.
**The layout viewport** is the visible area of a web page influenced by the browser window on desktop or the device screen size (although, for devices it can depend on user zooming, keyboard opening, etc...). It determines the space available for rendering HTML content. If you positioned a fixed box around the window, that’s the viewport we’re talking about.

```html
<div class="viewport"></div>
Expand All @@ -30,7 +30,7 @@ The `vw` unit stands for viewport width. But let’s start off with a catch righ
}
```

**The initial containing block** is a conceptual box serving as the root of the CSS box model. Its dimensions are tied to the layout viewport, with the top-left corner at (0,0). As the ICB is our root element, we can show it like this:
**The initial containing block** is a rectangle in which the root (`<html>`) element lives. Its dimensions are tied to the layout viewport, with the top-left corner at (0,0). As the ICB is our root element, we can show it like this:

```css
html {
Expand Down

0 comments on commit c6b51e0

Please sign in to comment.