html
/

CSS Media Queries

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Media Queries

What are Media Queries?

Media queries are used to apply CSS styles based on device characteristics like screen size, width, height, and orientation.

Basic Syntax

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

Common Breakpoints

DeviceWidth
Mobile≤ 768px
Tablet769px – 1024px
Desktop≥ 1025px

Min vs Max Width

CSSRead-only
1
@media (min-width: 768px) {
  /* styles for larger screens */
}

@media (max-width: 768px) {
  /* styles for smaller screens */
}

Mobile First Approach

CSSRead-only
1
/* Base styles for mobile */
body { font-size: 14px; }

/* Larger screens */
@media (min-width: 768px) {
  body { font-size: 16px; }
}

Multiple Conditions

CSSRead-only
1
@media (min-width: 600px) and (max-width: 1024px) {
  body { background: yellow; }
}

Orientation

CSSRead-only
1
@media (orientation: landscape) {
  body { background: lightgreen; }
}

Responsive Example

CSSRead-only
1
.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 80%;
  }
}

Best Practices

  • Use mobile-first approach
  • Use min-width for scalability
  • Keep breakpoints consistent
  • Test across multiple devices

Common Mistakes

  • Too many breakpoints
  • Using fixed layouts
  • Not testing on real devices
  • Overriding styles incorrectly

Conclusion

Media queries are essential for responsive design. They ensure your website looks good on all devices.

Try it yourself

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

Test Your Knowledge

Q1
of 3

Which defines breakpoint?

A
display
B
media
C
@media
D
query
Q2
of 3

Mobile width?

A
≥1024px
B
≤768px
C
≥768px
D
≤1200px
Q3
of 3

Which approach is best?

A
Desktop first
B
Mobile first
C
Tablet first
D
None

Frequently Asked Questions

What is media query?

A way to apply styles based on screen size.

What is mobile-first?

Designing for small screens first.

Which is better min or max?

Min-width is preferred for scalability.

Previous

css grid

Next

css transitions

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.