Introduction
Responsive design means building layouts that adapt to different viewport sizes, from small phones to large desktop monitors, using flexible grids, fluid images, and CSS media queries. Media queries apply CSS rules conditionally based on characteristics of the device or viewport, most commonly its width, allowing a single stylesheet to serve many screen sizes.
Cricket analogy: Responsive design is like a coach adjusting field placements depending on whether the match is a T20, ODI, or Test — the same core strategy (stylesheet) adapts its formation (layout) based on the format (viewport) being played.
Syntax
/* Mobile-first base styles apply by default */
.container {
padding: 16px;
}
@media (min-width: 600px) {
.container { padding: 24px; }
}
@media (min-width: 900px) {
.container {
padding: 32px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
@media (orientation: landscape) and (max-width: 900px) {
.hero { height: 60vh; }
}Explanation
A media query consists of @media followed by one or more conditions (features like min-width, max-width, orientation, prefers-color-scheme) combined with and, or (comma), or not. In a mobile-first approach, base styles target the smallest screens and min-width queries progressively enhance the layout for larger viewports; a desktop-first approach does the reverse with max-width. Breakpoints should be chosen based on where the content itself starts to look cramped or awkward, not fixed device sizes, since screen sizes vary too widely to target every device. The viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1">) is required for media queries to work correctly on mobile browsers, since without it, mobile browsers render at a desktop-width virtual viewport and scale down.
Cricket analogy: A media query combining min-width and orientation with 'and' is like a captain setting a field plan only when both the pitch condition and the bowler's arm (left/right) match specific criteria; choosing breakpoints based on where content looks cramped is like adjusting field spacing based on where fielders are actually crowding each other, not some fixed distance rule, and the viewport meta tag is like ensuring the stadium's big screen actually reads the correct camera feed instead of a stretched default.
Example
.nav-links {
display: none;
}
.hamburger {
display: block;
}
@media (min-width: 768px) {
.nav-links { display: flex; gap: 16px; }
.hamburger { display: none; }
}
.responsive-img {
max-width: 100%;
height: auto;
}Output
On narrow screens the hamburger icon is shown and the full nav-links list is hidden; once the viewport reaches 768px or wider, the media query flips the display values so the full navigation appears and the hamburger disappears. .responsive-img scales down proportionally to fit its container on any screen without overflowing.
Cricket analogy: On a narrow screen the hamburger icon is like a condensed scorecard showing just the essential run rate, and at 768px it's like switching to the full detailed scorecard with every stat visible once there's enough space; the responsive image scaling proportionally is like a team logo resizing to fit any size jersey without getting stretched or cropped.
Forgetting the viewport meta tag is one of the most common responsive design mistakes — without it, mobile browsers assume a ~980px layout viewport and your media queries will not trigger as expected.
Key Takeaways
- Media queries apply CSS conditionally based on viewport width, orientation, or other features.
- Mobile-first design uses min-width breakpoints to progressively enhance layouts for larger screens.
- Breakpoints should be chosen based on content needs, not specific device dimensions.
- The viewport meta tag is required for media queries to behave correctly on mobile devices.
- Fluid techniques like max-width: 100% on images complement media queries for full responsiveness.
Practice what you learned
1. In a mobile-first responsive design approach, which media feature is typically used to add styles for larger screens?
2. What happens if a page omits the viewport meta tag on mobile browsers?
3. Which CSS rule keeps an image from overflowing its container while scaling down proportionally?
4. How should responsive breakpoints ideally be chosen?
5. What does @media (orientation: landscape) target?
Was this page helpful?
You May Also Like
CSS Grid
A two-dimensional layout system for arranging content into rows and columns using grid-template-columns/rows, gap, and grid-area.
Flexbox in CSS
A one-dimensional layout model for distributing space and aligning items along a row or column using the flex container/item model.
CSS Units for Layout (px, %, rem, em, vh/vw)
How absolute and relative CSS length units differ and when to use px, %, rem, em, and viewport units in layouts.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics