Responsive CSS
📌 Covered in this chapter:
Responsive Definition · Mobile-First · Viewport · Fluid Layouts · Flexible Widths · Flexible Images · Breakpoints · Mobile Nav · Responsive Typography · Spacing · Device Testing · Orientation
Welcome to Chapter 27: Responsive CSS — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Responsive Design Ante Enti?
Responsive design ante enti? Web pages all screen sizes lo — mobile, tablet, desktop — properly render avvali. Layout, typography, spacing screen width batti adapt avuthundi.
Mobile-first design: Small screens ki styles first write chesi, min-width media queries tho larger screens ki enhance cheyadam. Progressive enhancement approach.
2Viewport & Fluid Layouts
HTML — Viewport Meta▶ Try in Editor
<meta name="viewport" content="width=device-width, initial-scale=1.0">Without viewport meta, mobile browsers desktop width simulate chestayi — tiny zoomed-out page.
CSS — Fluid Layout
.container {
width: min(100% - 2rem, 1200px);
margin-inline: auto;
}
img {
max-width: 100%;
height: auto;
}3Breakpoints, Mobile Nav & Responsive Typography
Common breakpoints: 480px (mobile), 768px (tablet), 1024px (laptop), 1280px (desktop). Content-driven breakpoints prefer cheyandi — device-specific numbers kante.
- Mobile navigation: Hamburger menu, bottom nav, or collapsible drawer
- Responsive typography:
clamp()for fluid font sizes - Responsive spacing:
remand viewport units for padding/margins - Orientation: Portrait vs landscape — media queries tho handle
- Device testing: DevTools device mode, real devices, BrowserStack