Responsive Web Design (RWD) is an approach to web development in which a website automatically adjusts its layout, content, and elements according to different screen sizes and devices (mobile, tablet, desktop).
👉 The goal is to provide an optimal viewing experience with minimum resizing, scrolling, and zooming.
Layout is designed using percentages instead of fixed pixels.
.container {
width: 80%;
}
✔ Adjusts automatically with screen size
Images resize according to screen width.
img {
max-width: 100%;
height: auto;
}
✔ Prevents image overflow
CSS technique used to apply different styles for different screen sizes.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
✔ Changes design for mobile devices
Specific screen widths where layout changes occur.
👉 Draw this in exam:
Desktop View Tablet View Mobile View
[ Full Layout ] → [ Adjusted ] → [ Stacked Layout ]
.container {
display: flex;
flex-wrap: wrap;
}
.box {
flex: 50%;
}
@media (max-width: 600px) {
.box {
flex: 100%;
}
}
✔ Use fluid layouts instead of fixed widths ✔ Optimize images for performance ✔ Use mobile-first approach ✔ Always test on multiple screen sizes ✔ Avoid heavy elements on mobile
Design starts from small screens first, then expands to larger screens.
✔ Improves performance and usability
Responsive Web Design = adaptable web layout
Key techniques:
Works on:
👉 Ensures a consistent and user-friendly experience across all devices.
Open this section to load past papers