How deeply does Math for Web Design cover viewport?

Defines axes and units, then works through CSS sizing, dynamic mobile heights, DOM rectangles, and pointer-coordinate conversions.

Viewport in Math for Web Design

The viewport is the visible area of a browser window in which a web page is rendered.

A viewport is the visible area of a browser window: the reference frame for much of responsive CSS and browser-side geometry. Its coordinate system starts at the top-left corner, (0, 0); x increases rightward, y increases downward, and positions use pixels by default. Coordinates may be negative or extend beyond the visible edges. section 1.4.9 section 10.1

Viewport-relative units size values against the whole visible browser area rather than against a parent element. One vw is 1% of viewport width and one vh is 1% of viewport height, so 100vw by 100vh creates a screen-sized region. This differs from percentage widths, which are relative to a parent. section 1.4.9 section 6.4

Use the viewport as a common reference when a UI must respond to the window itself:

Measure an element’s current rectangle with getBoundingClientRect(); its x, y, top, left, right, and bottom values are viewport-relative. section 10.2
Place cursor-driven UI with event.clientX and event.clientY, which remain relative to the visible window rather than the scrolled document. section 13.1.1
Set responsive breakpoints or bounded scaling from viewport width, using media queries, JavaScript comparisons, or clamp(). section 1.4.6 section 6.5.4

A tooltip that follows the pointer

Read clientX and clientY on mousemove, then add small x and y offsets before assigning left and top. Because both pointer coordinates and positioning use the viewport’s top-left origin, the tooltip stays beside the cursor regardless of document scroll. For document coordinates instead, convert with scrollX and scrollY. section 13.1.1

Mobile browser controls can change the visible height. Small viewport units (sv*) represent the size with browser UI present; large viewport units (lv*) represent it with UI hidden; dynamic units (dv*) update as that UI appears or disappears. For a full-screen region that must match the currently visible height, 100dvh avoids the overflow associated with a changing viewport. section 6.4.4

Table 1.9 Some uses of coordinate systems in CSS and JavaScript

Task	Code	Explanation
Get an element’s current viewport position in JavaScript.	`const rect = element .getBoundingClientRect();`	The `getBoundingClientRect()`method returns the positions of an element’s top, right, bottom, and left sides relative to the viewport origin.
Return the mouse pointer’s current viewport position in JavaScript.	`window.addEventListener("mousemove", (e) => {` `console.log(e.clientX, e.clientY);` `});`	For a `mousemove` event `e`, the properties `e.clientX` and `e.clientY` represent the pointer’s current position relative to the viewport’s origin.
Scale a heading based on the viewport width in CSS.	`h1 { font-size: 5vw; }`	As the viewport widens or narrows, the font size of each `h1` heading will grow or shrink proportionately.

Compare viewport coordinates, DOM measurements, pointer coordinates, and viewport-scaled type in one compact set of CSS and JavaScript tasks. section 1.4.9

How Math for Web Design covers it

Also explained in

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.