CSS: CSS Responsive Layout
Last updated: 2026-10-13
1. Responsive Images
(1) Basic Responsive Image
CSS
img {
max-width: 100%;
height: auto;
}
(2) Responsive Background Image
CSS
.banner {
background-image: url("desktop-bg.jpg");
background-size: cover;
background-position: center;
}
@media (max-width: 768px) {
.banner {
background-image: url("mobile-bg.jpg");
}
}
2. Responsive Tables
Tables can overflow on small screens. Use overflow-x: auto for horizontal scrolling:
▶ Example
▶ Try it Yourself3. Show/Hide Elements
Use media queries to show/hide elements at different breakpoints:
▶ Example
▶ Try it Yourself▶ Example
Responsive Flexbox grid that adapts columns to screen size:
▶ Try it Yourself4. Testing Responsive Layouts
- Browser resize: Drag browser window edges
- Chrome DevTools: F12 → Toggle device toolbar (Ctrl+Shift+M)
- Real devices: Test on actual phones/tablets when possible
❓ FAQ
Q How to make images responsive?
A Basic:
img { max-width: 100%; height: auto; } ensures images don't overflow. Advanced: use <picture> and <source> to load different resolutions at different screen sizes. Basic version is sufficient for most cases.Q Must responsive design have three versions?
A No. Ensure mobile experience first, then enhance on larger screens. Many pages only need mobile + desktop versions; tablet is often a natural transition. Key is "content first, device adaptation" — not responsive for responsive's sake.
Q How to test responsive effects?
A Browser DevTools can simulate various device sizes, but testing on real devices is recommended. Touch interactions feel different from simulation. Online tools like responsinator.com can also help quick preview.
📖 Summary
- Responsive layout's core is "flexible adaptation"
- Through flexible grids (% / fr), flexible images (max-width), and media queries (@media), you can build pages that perform well on all screens
- In practice, "mobile-first" is recommended: write mobile styles first, then use
min-widthto progressively add styles for tablet and desktop
📝 Exercises
- Create a "responsive personal blog" page with header navigation, article list, sidebar recommendations, and footer copyright. Requirements: mobile single column, tablet two columns, desktop three columns + fixed sidebar.
- Use
min-widthbreakpoints to change a card grid from 1 column to 4 columns, observing at each breakpoint. - Create a responsive table page where tables can scroll horizontally on small screens (using
overflow-x: auto).
