? Media Queries in CSS

Media Queries let you apply CSS styles conditionally based on the device’s characteristics, like screen size, resolution, orientation, and more. They are essential for responsive web design.

Basic Syntax

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

Common Conditions

• max-width: styles apply up to a certain viewport width

• min-width: styles apply from a certain viewport width and up

• orientation: portrait or landscape

• resolution: screen density (e.g., retina displays)

• prefers-color-scheme: for dark/light mode

Example: Responsive Layout

/* Default styles */.container {  width: 100%;  padding: 20px;}/* For screens up to 600px wide */@media (max-width: 600px) {  .container {    padding: 10px;    background-color: lightgray;  }}

Common Patterns

• Mobile First: Write base styles for small screens, then use min-width media queries for larger screens.

• Desktop First: Write base styles for large screens, then use max-width media queries for smaller screens.

Example: Mobile First

/* Mobile styles */nav {  display: block;}/* Tablet and up */@media (min-width: 768px) {  nav {    display: flex;  }}/* Desktop and up */@media (min-width: 1024px) {  nav {    justify-content: space-between;  }}

Why Use Media Queries?

• Adapt layout and typography for different devices.

• Improve usability and readability.

• Optimize performance by loading appropriate styles.

Want me to help build a fully responsive page using media queries or explain advanced queries like prefers-reduced-motion?