? Responsive Web Design (RWD) — Media Queries in CSS

Media Queries let you apply CSS conditionally based on device characteristics like screen width, height, resolution, orientation, and more. They are essential for creating responsive designs.

Basic Syntax

@media (condition) {  /* CSS rules here */}

Common Examples

1. Target screens smaller than 768px (e.g., tablets, phones)

@media (max-width: 768px) {  body {    background-color: lightblue;  }}

2. Target screens larger than or equal to 1024px (desktops)

@media (min-width: 1024px) {  .container {    max-width: 960px;    margin: auto;  }}

3. Target devices in portrait orientation

@media (orientation: portrait) {  header {    font-size: 1.2rem;  }}

Using Multiple Conditions

@media (min-width: 600px) and (max-width: 900px) {  .sidebar {    display: none;  }}

Mobile-First Approach (Recommended)

Start with default styles for small screens, then add media queries for larger devices:

/* Default: mobile */.container {  padding: 10px;}/* Tablets and up */@media (min-width: 768px) {  .container {    padding: 20px;  }}

Common Breakpoints

Example: Responsive Navigation Menu

nav ul {  display: flex;  flex-direction: row;}@media (max-width: 600px) {  nav ul {    flex-direction: column;  }}

? Summary

• Media queries let you apply CSS based on screen/device features.

• Use min-width and max-width to target device sizes.

• Combine with flexible layouts and images for full responsiveness.

Want me to generate a complete responsive CSS example using media queries?