Viewport
ELI5 — The Vibe Check
The viewport is the visible area of a webpage in the user's browser window. It changes depending on the device — small on a phone, huge on a 4K monitor. CSS uses viewport units like vw (viewport width) and vh (viewport height) so you can size things relative to the screen.
Real Talk
The viewport is the visible area of a web document as rendered in the browser. Viewport dimensions are exposed via window.innerWidth/innerHeight. CSS viewport units (vw, vh, vmin, vmax, svh, dvh) size elements relative to the viewport. The tag controls how browsers scale pages on mobile.
Show Me The Code
/* 100% of viewport width and height */
.hero {
width: 100vw;
height: 100vh;
}
/* Use dvh for mobile — accounts for browser chrome */
.full-screen {
height: 100dvh;
}
When You'll Hear This
"The modal should fill the viewport on mobile." / "Use dvh instead of vh on mobile — vh doesn't account for the address bar."
Related Terms
Box Model
The box model is how CSS thinks about every element on a page — as a box with four layers: content, padding, border, and margin.
Breakpoint
A breakpoint is like a 'pause game' button you place on a specific line of code.
Media Query
A media query is a CSS if-statement based on screen conditions. 'If the screen is narrower than 768px, apply these styles.
Mobile First
Mobile first means you design for the smallest screen first, then add styles as screens get bigger.
Responsive Design
Responsive design means your website looks good on EVERY screen size — from a tiny phone to a giant 4K monitor.