Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use media queries for common device breakpoints with CSS?
Media queries are used on web pages to create responsive designs by applying different styles based on screen sizes. They allow you to target specific devices like phones, tablets, and desktop computers with custom CSS rules.
Syntax
@media media-type and (condition) {
/* CSS rules */
}
Common Device Breakpoints
The standard device breakpoints used in responsive web design are −
| Device | Screen Width | Media Query |
|---|---|---|
| Mobile Phones | Less than 768px | max-width: 767px |
| Tablets | 768px to 991px | min-width: 768px |
| Small Laptops | 992px to 1199px | min-width: 992px |
| Large Screens | 1200px and above | min-width: 1200px |
Example: Responsive Background Colors
The following example demonstrates how to use media queries to change background colors at different breakpoints ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
color: white;
text-align: center;
padding: 20px;
transition: background-color 0.3s ease;
}
/* Mobile devices (up to 767px) */
@media only screen and (max-width: 767px) {
body {
background-color: #e74c3c;
}
.device-info::after {
content: "Mobile Device (?767px)";
}
}
/* Tablets (768px to 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
body {
background-color: #f39c12;
}
.device-info::after {
content: "Tablet (768px - 991px)";
}
}
/* Small laptops (992px to 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
body {
background-color: #27ae60;
}
.device-info::after {
content: "Small Laptop (992px - 1199px)";
}
}
/* Large screens (1200px and above) */
@media only screen and (min-width: 1200px) {
body {
background-color: #3498db;
}
.device-info::after {
content: "Large Screen (?1200px)";
}
}
</style>
</head>
<body>
<h1>Responsive Breakpoints Demo</h1>
<p class="device-info">Current Device: </p>
<p>Resize your browser window to see different background colors for each breakpoint.</p>
</body>
</html>
The page displays different background colors based on screen width: - Red for mobile devices (?767px) - Orange for tablets (768px-991px) - Green for small laptops (992px-1199px) - Blue for large screens (?1200px) The current device type is displayed dynamically as you resize the window.
Best Practices
Use mobile-first approach − Start with mobile styles and use
min-widthfor larger screensUse specific ranges − Combine
min-widthandmax-widthto avoid overlapping stylesTest on real devices − Browser developer tools are helpful but test on actual devices when possible
Conclusion
Media queries with common device breakpoints enable responsive web design by applying different styles based on screen sizes. Use the standard breakpoints and mobile-first approach for the best user experience across all devices.
217 Views
