HTML Responsive
Responsive HTML starts with the viewport meta tag and flexible layout. The browser does most of the work if you do not get in its way.
Responsive baseline
EXAMPLE
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<!-- THE most important meta tag for mobile -->
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>Responsive starter</title>
<style>
/* Mobile-first: write styles for narrow first, then add media queries */
body { margin: 0; font-family: system-ui, sans-serif; }
.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr; /* 1 col on mobile */
}
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
img { max-width: 100%; height: auto; } /* fluid images by default */
</style>
</head>
<body>
<div class='container'>
<h1>Welcome</h1>
<div class='grid'>
<article>
<picture>
<!-- Different sources per screen -->
<source srcset='/hero-1200.jpg' media='(min-width: 1024px)' />
<source srcset='/hero-800.jpg' media='(min-width: 768px)' />
<img src='/hero-400.jpg' alt='Hero illustration' loading='lazy' />
</picture>
<h2>One</h2>
<p>...</p>
</article>
<article><h2>Two</h2><p>...</p></article>
<article><h2>Three</h2><p>...</p></article>
</div>
</div>
</body>
</html>
Why it matters
Mobile-first + flexible images + a sensible meta viewport gives you 80 percent of responsive design for free. Add media queries only where the layout would actually break - usually for switching column counts and font scaling.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Responsive</title>
</head>
<body>
<h1>HTML Responsive</h1>
<p>This is a demo page for the "HTML Responsive" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Add the viewport meta tag so mobile browsers do not zoom out.
<meta name="viewport" content="width=
, initial-scale=1">
Two words joined with a hyphen.
Discussion
Loading…