In this article, we are going to learn how can we target desktop, tablet, and mobile using Media Query. Media Query is a popular technique that enables to delivery of a style sheet to different devices that have different screen sizes and resolutions respectively. They are used to customize the appearance of a website on multiple devices.
The screen resolutions of different devices are listed below:
- Mobile (Smartphone) max-width: 480px
- Low-Resolution Tablets and iPads max-width: 767px
- Tablets iPads portrait mode max-width: 1024px
- Desktops max-width: 1280px
- Huge size (Larger screen) max-width: 1281px 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:
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:
.gif)
Output
Supported Browsers:
- Google Chrome 21.0
- Internet Explorer 9.0
- Mozilla Firefox 3.5
- Safari 4.0
- Opera 9.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
29 Nov, 2023
Like Article
Save Article