CSS Responsive Design
Responsive Layout
A Responsive Layout is a web page layout that automatically adjusts to different screen sizes and devices.
Instead of creating separate versions of a website for mobile, tablet, and desktop users, responsive layouts adapt dynamically using CSS techniques. The supporting concepts are explained in CSS Media Queries and Mobile First Design.
Responsive layouts help ensure that content remains:
- Readable
- Accessible
- User-friendly
- Consistent across devices
Modern responsive layouts are commonly built using:
- Flexible widths
- CSS Flexbox
- CSS Grid
- Responsive images
- Media Queries
Syntax
A responsive layout typically combines flexible units with media queries.
Responsive Layout Syntax
css
.container {
width: 100%;
max-width: 1200px;
}Allows the layout to shrink and grow based on screen size.
Attributes
| Technique | Description | Example |
|---|---|---|
| width: 100% | Makes elements flexible | width: 100%; |
| max-width | Prevents excessive stretching | max-width: 1200px; |
| Flexbox | Creates flexible layouts | display: flex; |
| Grid | Creates responsive grids | display: grid; |
| Media Queries | Applies styles for specific screen sizes | @media (...) |
Example
Responsive Layout Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout Example</title>
<style>
.container {
display: flex;
gap: 20px;
max-width: 1200px;
margin: auto;
}
.box {
flex: 1;
background-color: lightblue;
padding: 20px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">Section 1</div>
<div class="box">Section 2</div>
<div class="box">Section 3</div>
</div>
</body>
</html>Output
Browser Output
css
Desktop View
Section 1 | Section 2 | Section 3
Mobile View
Section 1
Section 2
Section 3
Desktop displays sections side by side
Mobile stacks sections vertically
The layout automatically adjusts to screen sizeBrowser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| Media-query layouts | 1 | 12 | 1 | 3 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
Responsive Images
Responsive Images
css
img {
max-width: 100%;
height: auto;
}Prevents images from overflowing their container.
Responsive Grid Example
Responsive Grid Example
css
.container {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
}Automatically adjusts column count based on screen size.
Responsive Flexbox Example
Responsive Flexbox Example
css
.container {
display: flex;
flex-wrap: wrap;
}Allows items to move onto new rows when space is limited.
Best Practices
| Practice | Benefit |
|---|---|
| Use relative units | Better scalability |
| Use Flexbox/Grid | Easier responsive layouts |
| Use media queries | Device-specific styling |
| Use responsive images | Prevent overflow |
| Test on multiple devices | Better user experience |
Conclusion
Responsive Layouts ensure that websites work effectively across different devices and screen sizes. By combining flexible units, responsive images, Flexbox, Grid, and Media Queries, developers can create layouts that provide a consistent and user-friendly experience for all users.