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
Media Types in CSS: There are many types of media types which are listed below:
- all: It is used for all media devices
- print: It is used for printer.
- screen: It is used for computer screens, smartphones, etc.
- speech: It is used for screen readers that read the screen aloud.
Features of Media query: There are many features of media query which are listed below:
- color: The number of bits per color component for the output device.
- grid: Checks whether the device is grid or bitmap.
- height: The viewport height.
- aspect ratio: The ratio between width and height of the viewport.
- color-index: The number of colors the device can display.
- max-resolution: The maximum resolution of the device using dpi and dpcm.
- monochrome: The number of bits per color on a monochrome device.
- scan: The scanning of output devices.
- update: How quickly can the output device modify.
- width: The viewport width.
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:
@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.
Example: This example illustrates the use of the CSS Media query to build the mobile-first design by specifying the different device-width.
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 {
/* 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