The Viewport Meta Tag
This single line is the foundation of responsive design. Without it, mobile browsers zoom out to show a shrunken desktop layout.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Responsive Images
<!-- Never overflow their container -->
<style>
img { max-width: 100%; height: auto; }
</style>
<!-- Serve different sizes per screen -->
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Responsive photo"
>Responsive Text
<style>
/* Fluid font: min 18px, max 28px, scales with viewport */
h1 { font-size: clamp(18px, 4vw, 28px); }
/* Relative units scale with user preferences */
body { font-size: 1rem; } /* 1rem = browser default (usually 16px) */
</style>Responsive Layout with CSS
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
</style>
<div class="grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>The viewport meta tag +
max-width: 100% on images solves 80% of mobile layout issues. Add CSS Grid with auto-fill + minmax and you rarely need media queries for basic card layouts.