📱 Flexibility with Browsers & Display Devices

CSS gives developers the power to make a single website adapt to any screen size, any device, and any browser. This is called responsive design — the layout responds and adapts to the user's device.

📖 Key CSS Features for Flexibility

CSS Feature	What It Does	Code Example
Media Queries	Apply different styles based on screen width, height, or orientation	`@media (max-width: 768px) { .nav { display: none; } }` — hides the nav on tablets and smaller
Flexbox	One-dimensional layout — align and distribute items in a row or column	`display: flex; justify-content: space-between;` — evenly space items
CSS Grid	Two-dimensional layout — create complex grid systems for page layouts	`display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));`
Relative units	`%`, `em`, `rem`, `vw`, `vh` scale with the viewport or parent	`width: 90%; font-size: 1.2rem;` — scales proportionally
Viewport meta tag	Tells the browser to use the device's actual width	`<meta name="viewport" content="width=device-width">`