CSS Media Queries - Reference

What are Media Queries?

Media queries let you apply different styles based on device characteristics like screen width, height, or orientation. They're the foundation of responsive web design, allowing your site to adapt to phones, tablets, and desktops.

Key Concept: Write CSS that only applies when certain conditions are met.

Basic Syntax

Media queries use the @media rule followed by conditions.

@media (max-width: 768px) { /* styles here */ }

Example: Styles only apply when screen width is 768px or less

Common Breakpoints

Standard screen size ranges for responsive design.

                /* Mobile */ @media (max-width: 480px) { }

                /* Tablet */ @media (max-width: 768px) { }

                /* Desktop */ @media (min-width: 1024px) { }

Tip: Design mobile-first, then add styles for larger screens using min-width

min-width vs max-width

Two approaches to responsive design.

                @media (min-width: 768px) { /* 768px and above */ }

                @media (max-width: 768px) { /* 768px and below */ }

Mobile-first approach: Use min-width (styles for larger screens)

Desktop-first approach: Use max-width (styles for smaller screens)

Orientation

Target devices based on orientation.

                @media (orientation: portrait) { }

                @media (orientation: landscape) { }

Use case: Adjust layout when phone is rotated

Combining Conditions

Use 'and' to combine multiple conditions.

@media (min-width: 768px) and (max-width: 1024px) { }

Example: Styles only for tablets (between 768px and 1024px)

Print Styles

Special styles for when users print your page.

@media print { /* hide navigation, adjust colors */ }

Common uses: Hide navigation, remove backgrounds, adjust fonts for printing