Media queries allow targeting different devices by adjusting CSS styles based on their screen size and resolution. By specifying breakpoints, developers can optimize layouts for desktop, tablet, and mobile devices, ensuring a responsive design across various screen sizes.
The screen resolutions of different devices are listed below:
Device | Max Width (pixels) |
---|---|
Mobile (Smartphone) | 480 |
Low-Resolution Tablets and iPads | 767 |
Tablets iPads (portrait mode) | 1024 |
Desktops | 1280 |
Huge size (Larger screen) | 1281 and greater |
Syntax:
@media(media feature) {
// CSS Property
}
Parameters:
- @media rule to include a block of CSS properties when a certain condition is true.
- media features are width (max-width and min-width), aspect ratio, resolution, orientation, etc.
Example: In this example, we are changing the background color according to the width of the device.
html
<!DOCTYPE html>
<html>
<head>
<title>Media Query</title>
<style>
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
body {
background-color: red;
}
}
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
body {
background-color: yellow;
}
}
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
body {
background-color: blue;
}
}
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
body {
background-color: green;
}
}
/* Media Query for Large screens */
@media (min-width: 1281px) {
body {
background-color: white;
}
}
</style>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Media Query</h2>
</body>
</html>
Output:
Example 2: In this example, we are changing the font color according to the width of the device.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Media Query</title>
<style>
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
h1 {
color: red;
}
}
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
h1 {
color: yellow;
}
}
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
h1 {
color: blue;
}
}
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
h1 {
color: green;
}
}
/* Media Query for Large screens */
@media (min-width: 1281px) {
h1 {
color: rgb(66, 7, 161);
}
}
</style>
</head>
<body style="text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Media Query</h2>
</body>
</html>
Output: