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
Selected Reading
Set Media Queries for different CSS style rules for different size devices
CSS media queries allow you to apply different style rules based on device characteristics such as screen size, orientation, and resolution. This enables responsive design that adapts to various devices like mobile phones, tablets, and desktop computers.
Syntax
@media media-type and (condition) {
/* CSS rules */
}
Common Media Query Breakpoints
| Device | Screen Width | Media Query |
|---|---|---|
| Mobile | Up to 768px | @media (max-width: 768px) |
| Tablet | 769px to 1024px | @media (min-width: 769px) and (max-width: 1024px) |
| Desktop | 1025px and above | @media (min-width: 1025px) |
Example: Basic Media Query
The following example changes the background color based on screen width −
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightpink;
padding: 20px;
font-family: Arial, sans-serif;
}
.container {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<div class="container">
<p>If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color</p>
</div>
</body>
</html>
On screens wider than 420px: Light pink background with centered text. On screens 420px or narrower: Light blue background with centered text.
Example: Multiple Device Breakpoints
This example demonstrates different styles for mobile, tablet, and desktop devices −
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-box {
background-color: #f0f0f0;
padding: 20px;
margin: 20px auto;
text-align: center;
border-radius: 8px;
}
/* Mobile styles */
@media (max-width: 768px) {
.responsive-box {
background-color: #e74c3c;
color: white;
width: 90%;
font-size: 14px;
}
}
/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
.responsive-box {
background-color: #f39c12;
color: white;
width: 70%;
font-size: 16px;
}
}
/* Desktop styles */
@media (min-width: 1025px) {
.responsive-box {
background-color: #27ae60;
color: white;
width: 50%;
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="responsive-box">
<h2>Responsive Design</h2>
<p>This box changes color and size based on your screen width.</p>
</div>
</body>
</html>
Mobile (?768px): Red box with 90% width and 14px font size. Tablet (769px-1024px): Orange box with 70% width and 16px font size. Desktop (?1025px): Green box with 50% width and 18px font size.
Conclusion
Media queries are essential for creating responsive websites that work across all devices. Use breakpoints to define different styles for mobile, tablet, and desktop screens to provide optimal user experience.
Updated on: 2026-03-15T11:59:16+05:30
335 Views
Advertisements