Responsive Web Design (RWD) is a modern web development approach that allows your website to adapt automatically to any screen size desktop, tablet, or mobile.
Instead of building separate websites for each device, responsive design ensures a single webpage adjusts fluidly to the screen width using HTML and CSS.
But first,
The viewport is the visible area of a web page on a device’s screen. By default, mobile browsers render pages as if they were on a desktop screen and then zoom out which breaks layout.
To fix this, HTML5 introduced the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">Explanation:
- width=device-width – Page width matches the screen width of the device.
- initial-scale=1.0 – Sets the default zoom level to 100%.
Without this tag, your page won’t look responsive even if your CSS is perfect.
Core Components of Responsive Web Design
1. Fluid Layouts (Flexible Grids)
Use percentages (%) instead of fixed pixels for width and height.
Example:
.container {
width: 90%;
margin: auto;
}2. Flexible Images
Images should resize automatically according to screen width.
Example:
img {
max-width: 100%;
height: auto;
}3. Media Queries
CSS feature that applies styles based on device width or orientation.
Example:
@media (max-width: 768px) {
body {
background-color: #f2f2f2;
}
}Example of Simple Responsive Webpage
Here’s a complete example showing how to make a responsive layout using HTML and CSS,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn responsive web design in HTML and CSS with examples and explanations.">
<meta name="keywords" content="HTML responsive web design, CSS media queries, mobile friendly layout, responsive website tutorial">
<meta name="author" content="Web Tutorials">
<title>HTML Responsive Web Design Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Responsive Web Design</h1>
<p>Resize the browser window to see the effect!</p>
</header>
<main>
<section class="content">
<article>
<h2>What is Responsive Design?</h2>
<p>Responsive design ensures your website looks great on all devices by adjusting layout and content dynamically.</p>
</article>
<aside>
<h3>Tips:</h3>
<ul>
<li>Use fluid widths</li>
<li>Apply media queries</li>
<li>Test on different devices</li>
</ul>
</aside>
</section>
</main>
<footer>
<p>© 2025 WebTutorials. All Rights Reserved.</p>
</footer>
</body>
</html>Example CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
}
.content {
display: flex;
margin: 20px;
gap: 20px;
}
article {
flex: 3;
}
aside {
flex: 1;
background: #f9f9f9;
padding: 10px;
}
/* Responsive Media Query */
@media (max-width: 768px) {
.content {
flex-direction: column;
}
}How the Code Works?
- The <meta name=”viewport”> tag makes the page scale properly on mobile devices.
- CSS Flexbox arranges the layout in a row on large screens and stacks vertically on small screens.
- The media query changes layout when the screen width is below 768px (typical tablet size).
HTML Responsive Web Design is not just a trend it’s a necessity for modern websites. By using flexible grids, media queries, and fluid images, you can create web pages that look perfect on every device.