? Responsive Web Design (RWD) — Viewport in CSS/HTML

The viewport is the visible area of a web page on a device screen. Controlling the viewport is critical to making websites responsive.

? Viewport Meta Tag (HTML)

This tag tells the browser how to control the page’s dimensions and scaling on different devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What it means:

• width=device-width ? sets viewport width to the device’s screen width

• initial-scale=1.0 ? sets the initial zoom level (no zoom)

Why is it important?

Without this tag, mobile browsers display web pages with a default viewport width (usually 980px), making the page look zoomed out and not responsive.

? CSS Viewport Units

CSS uses viewport-relative units to size elements relative to the viewport:

Example:

.hero {  width: 100vw;   /* Full viewport width */  height: 50vh;   /* Half viewport height */}

Summary

• Use the viewport meta tag to enable responsive scaling on mobile devices.

• Use viewport units (vw, vh) in CSS for dynamic sizing relative to screen.

• Both together help create flexible, adaptive layouts.

Want me to help with a responsive layout example using viewport units?