Markup CityISSUE #30 of 39

responsive · sizing for any screen

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysResponsive HTML starts with the viewport meta tag; CSS media queries do the rest of the adapting.

The single most important line for mobile is <meta name="viewport" content="width=device-width,initial-scale=1">. Without it, phones pretend to be ~980px wide and shrink your page. With it, the page uses the real device width.

From there, responsiveness is mostly CSS: flexible units, max-width on containers, and media queries that rearrange layout at breakpoints. HTML's job is to provide clean structure and the viewport tag.

Power-ups you unlock

viewport meta = the foundation of mobile layout
Without it, phones zoom out to ~980px
Real responsiveness is CSS (units, max-width, media queries)
Write structure that can reflow, not fixed pixel boxes

The Unclosed Tag attacks — common mistakes

Omitting the viewport meta (everything looks tiny on phones)
Setting initial-scale to a fixed zoom that blocks pinch-zoom
Hard-coding pixel widths that overflow small screens

Boss battleAdd the viewport meta, then a media query that switches the body background color below 600px. Resize the preview to trigger it.

Example code

<!doctype html>
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  body{background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px}
  @media (max-width:600px){ body{background:#140a28} h1::after{content:' (narrow)'} }
</style>
</head>
<body><h1>resize me</h1><p>narrow the preview below 600px.</p></body></html>

▶ Open the interactive comic issue

‹ Layout · The Structural Skeleton <Code> · <Pre> · <Kbd> · The Computer Tags ›