Responsive web design ensures that web pages adjust fluidly across different screen sizes—smartphones, tablets, laptops, and desktop displays—providing an optimal viewing and reading experience.
Creating responsive HTML layouts requires three essential techniques:
<!-- 1. Mobile Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 2. Fluid Responsive Images -->
<img src="banner.jpg" alt="Responsive Banner" style="max-width: 100%; height: auto;">
<!-- 3. Responsive Picture Element for Art Direction -->
<picture>
<source media="(max-width: 600px)" srcset="banner-mobile.jpg">
<img src="banner-desktop.jpg" alt="Banner">
</picture>
Responsive design principles:
max-width: 100%.@media) and Flexbox/Grid change column arrangements based on viewport width breakpoints.flowchart TD
A["User Opens Web Page"] --> B{"Screen Width Check"}
B -- "< 640px (Mobile)" --> C["1-Column Stacked Layout + Touch Menus"]
B -- "640px - 1024px (Tablet)" --> D["2-Column Grid Layout"]
B -- "> 1024px (Desktop)" --> E["Multi-Column Dashboard Layout"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Responsive Design Example</title>
<style>
.container { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
@media (min-width: 768px) {
.container { grid-template-columns: 1fr 1fr; }
}
</style>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; margin: 0;">
<h2 style="padding: 1rem;">Responsive Grid Layout</h2>
<div class="container">
<div style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px;">
<h3>Column One</h3>
<p>Stacks on mobile screens, sits side-by-side on desktop viewports.</p>
</div>
<div style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px;">
<h3>Column Two</h3>
<p>Fluid grid columns adapt seamlessly to screen resizing.</p>
</div>
</div>
</body>
</html>
width: 1200px) on layout containers: Use percentage width, max-width, or CSS Grid/Flexbox so containers contract on smaller screens.max-width: 100%; height: auto; on images: Prevents large images from overflowing out of screen edges on mobile devices.@media (min-width: ...) queries to expand layouts for desktop screens.Create a responsive image using style="max-width: 100%; height: auto;" inside a <div> wrapper with a max-width: 500px!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.