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 on which 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:
@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 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.
Example: This example illustrates the use of the CSS Media query to build the mobile-first design by specifying the different device width.
<!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.
* { margin: 0;
padding: 0;
}/* Default Design */.gfg-div { /* To make all elements center */
display: flex;
justify-content: center;
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;
}
}/* For Mobile Landscape View */@media screen and (max-device-width: 640px)
and (orientation: landscape) {
.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 (min-device-height: 667px)
and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
.gfg-div {
width: 400px;
height: 400px;
background-color: darkgoldenrod;
color: black;
}
}; |
Output:
Supported Browsers:
- Google Chrome
- Firefox
- Microsoft Edge
- Internet Explorer
- Opera
- Safari