CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...
HTML CSS JavaScript jQuery PHP Bootstrap NodeJS ReactJS AngularJS ExpressJS
CSS3 Media query for all devices
Difficulty Level : Easy ● Last Updated : 03 Nov, 2021
Read Discuss Courses Practice Video
The media query in CSS is used to create a responsive web design to
make a user-friendly website. It means that the view of web pages
differs from system to system based on screen or media types. Media is
allowing us to reshape and design the user view page of the website for
specific devices like Tablets, Desktops, Mobile phones, etc.
Media queries can be used to check many things like the following
• Width and height of the viewport
• Width and height of the device
• Orientation
• Resolution
A media query consist of a media type that can contain one or more
expression which can be either true or false. The result of the query is
true if the specified media matches the type of device where the
document is displayed on. If the media query is true then the style is
applied. In simple words, it uses the @media rule to add the block of
CSS properties, based on certain conditions.
Syntax:
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy
Got It !
▲ HIDE AD
1 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...
@media not | only mediatype and (expression)
{
// Code content
}
We can add the breakpoint to see the screen-width along with the width
and height of the viewport for the different devices. A breakpoint is a
point or key that determines when to change the layout by reshaping &
adding the new rules inside the media queries. There are some common
breakpoints, not a standard resolution, that can be used for the
different widths & heights of devices:
• For Mobile devices: 320px-480px
• For Tablets or iPad: 480px - 768px
• For Laptop or small-size screen: 768px -1024px
• For Desktop or large-size screen: 1024px -1200px
• For Extra-large size device: 1200px and more
These breakpoints can help to build responsive designs(ie., Mobile-first
design) by specifying the different sets of values for width & height. We
can also use the media queries for changing the layout of a webpage
that will be depending on the orientation of the browser.
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy
Example: This example illustrates the use of the CSS Media query to
Got It !
build the mobile-first design by specifying
▲ the different device-width. HIDE AD
2 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GeeksforGeeks CSS Media Query</title>
<meta name="description"
content="CSS Media Query for all devices
like mobile, tablet, desktop etc.">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="gfg-style.css">
</head>
<body>
<div class="gfg-div">GeeksforGeeks</div>
</body>
</html>
CSS Code: The following CSS code specifies the media queries with
different styling properties based on certain conditions that will be
displayed according to the device size.
CSS
* {
margin: 0;
padding: 0;
}
/* Default Design */
.gfg-div {
cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
We use
/* To make that all elements
you have centerour*/
read and understood Cookie Policy & Privacy Policy
display: flex; Got It !
justify-content: center; ▲ HIDE AD
3 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...
align-items: center;
/* Default Styling */
margin: 20px auto;
padding: 30px;
font-size: 30px;
width: 300px;
height: 300px;
background-color: darkseagreen;
color: black;
}
/* For Desktop View */
@media screen and (min-width: 1024px) {
.gfg-div {
background-color: #63c971;
color: #fff;
}
}
/* For Tablet View */
@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
.gfg-div {
width: 400px;
height: 400px;
background-color: orange;
color: black;
}
}
/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
and (orientation: portrait) {
.gfg-div {
width: 200px;
height: 200px;
background-color: red;
color: #fff;
}
}
cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
We use
/* For Mobile Landscape
that you have read andView */ our Cookie Policy & Privacy Policy
understood
@media screen and (max-device-width: 640px)
Got It !
and (orientation: landscape) { ▲ HIDE AD
4 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...
.gfg-div {
width: 400px;
height: 200px;
background-color: cyan;
color: black;
}
}
/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
.gfg-div {
width: 400px;
height: 200px;
background-color: chartreuse;
color: black;
}
}
/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.gfg-div {
width: 400px;
height: 400px;
background-color: brown;
color: black;
}
}
/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.gfg-div {
width: 400px;
height: 400px;
background-color: cornflowerblue;
color: black;
}
}
/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media
We use cookies to(min-device-height: 667px)
ensure you have the best browsing and
experience (min-device-width:
on our 375px)
website. By using our site, you acknowledge
and (-webkit-min-device-pixel-ratio: 3)Policy
that you have read and understood our Cookie { & Privacy Policy
.gfg-div {
Got It !
width: 400px; ▲ HIDE AD
5 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...
height: 400px;
background-color: darkgoldenrod;
color: black;
}
}
Output:
Supported Browsers:
• Google Chrome
• Firefox
• Microsoft Edge
• Internet Explorer
• Opera
• Safari
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy
Got It !
▲ HIDE AD
6 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...
Like 9
Next
Bootstrap Grid System
Related Articles
1. How to use Sass Variables with CSS3 Media Queries ?
2. Explain all the measurement units in CSS3
3. Advantage of CSS3 over CSS
4. How to Create Animated Background using CSS3 ?
5. How to Create a Curve Text using CSS3/Canvas ?
6. How to Create Link Tooltip Using CSS3 and jQuery ?
7. How to make bubble background using HTML5 and CSS3?
8. Difference between CSS and CSS3
9. Fading Text Animation Effect Using CSS3
10. How to transform background image using CSS3 ?
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy
Got It !
Article Contributed By : ▲ HIDE AD
7 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...
SohelRaja
@SohelRaja
Vote for di�culty
Current di�culty : Easy
Easy Normal Medium Hard Expert
Improved By : surindertarika1234, bhaskargeeksforgeeks
Article Tags : CSS-Advanced, CSS-Properties, CSS-Questions, CSS,
HTML, Web Technologies
Practice Tags : HTML
Improve Article Report Issue
A-143, 9th Floor, Sovereign Corporate Tower,
Sector-136, Noida, Uttar Pradesh - 201305
feedback@geeksforgeeks.org
Company Learn
About Us DSA
We use cookies to ensure you have the best browsing experience on our website. By using
Careers our site, you acknowledge
Algorithms
that you have read and understood our Cookie Policy & Privacy Policy
In Media Data Structures
Got It !
Contact Us ▲ SDE Cheat Sheet HIDE AD
8 de 9 24/01/23, 05:22
CSS3 Media query for all devices - GeeksforGeeks https://www.geeksforgeeks.org/css3-media-query-for-all...
Privacy Policy Machine learning
Copyright Policy CS Subjects
Advertise with us Video Tutorials
Courses
News Languages
Top News
Python
Technology
Java
Work & Career
CPP
Business
Golang
Finance
C#
Lifestyle
SQL
Knowledge
Kotlin
Web Development Contribute
Web Tutorials Write an Article
Django Tutorial Improve an Article
HTML Pick Topics to Write
JavaScript Write Interview Experience
Bootstrap Internships
ReactJS Video Internship
NodeJS
@geeksforgeeks , Some rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge
that you have read and understood our Cookie Policy & Privacy Policy
Got It !
▲ HIDE AD
9 de 9 24/01/23, 05:22
