What are Media Queries?
Media queries are a key component of responsive web design. They allow you to apply different CSS styles based on various device characteristics or parameters, such as:
- Screen width and height
- Device orientation (portrait or landscape)
- Display type (screen, print, etc.)
- Resolution
- And many other features
Media queries help create websites that look good and function well on devices of all sizes, from mobile phones to desktop computers.
Basic Media Query Syntax
The basic syntax of a media query includes a media type and one or more expressions that check for specific conditions of that media type:
@media mediatype and (expression) {
/* CSS rules to apply when the conditions are true */
}
Common media types include:
- all - Suitable for all devices (default)
- screen - Computers, tablets, mobile phones, etc.
- print - Print preview mode/printed pages
- speech - Screen readers
Example of a media query that applies styles when the screen width is 600px or less:
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Live Demo: Screen Size Detection
This demo changes color based on your current screen width. Resize your browser window to see it change:
The CSS for this demo uses different media queries to change the background color and text based on screen width:
/* Mobile */
@media (max-width: 576px) {
.device-demo { background-color: #e74c3c; }
#screenSize:after { content: "Mobile (max-width: 576px)"; }
}
/* Tablet Small */
@media (min-width: 577px) and (max-width: 768px) {
.device-demo { background-color: #f39c12; }
#screenSize:after { content: "Tablet Small (577px - 768px)"; }
}
/* And so on for other screen sizes... */
Common Breakpoints
While you can set breakpoints anywhere, these are commonly used screen width breakpoints:
- Extra small devices (phones): up to 576px
- Small devices (large phones, small tablets): 577px to 768px
- Medium devices (tablets): 769px to 992px
- Large devices (desktops): 993px to 1200px
- Extra large (large desktops): 1201px and above
It's important to note that these breakpoints should be tailored to your specific design needs rather than strictly following these conventions.
Orientation Media Queries
You can apply different styles based on whether the device is in portrait or landscape orientation:
@media (orientation: landscape) {
/* Styles for landscape orientation */
}
@media (orientation: portrait) {
/* Styles for portrait orientation */
}
Current orientation demo:
Print Media Queries
You can define styles specifically for printed pages:
@media print {
/* Styles applied when printing */
.no-print { display: none; }
.print-only { display: block; }
}
This paragraph will be hidden when you print this page.
Print Version
This content only appears when printing. Try using your browser's print preview feature to see it.
Other Media Features
Beyond screen size and orientation, you can use many other media features in your queries:
Best Practices
- Mobile First Approach: Design for mobile devices first, then progressively enhance for larger screens.
- Use Relative Units: Use em, rem, %, vh, vw instead of pixels for flexible layouts.
- Don't Rely Only on Screen Size: Consider using feature queries where appropriate.
- Test on Real Devices: Simulators and emulators can be helpful, but nothing beats testing on actual devices.
- Keep It Simple: Use as few breakpoints as necessary to achieve your design goals.