CSS media queries allows the styling of elements depending on the devices. It helps to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types.
The breakpoints in @media specifies for what device-width size, the content is just starting to break or deform. The CSS2 rule introduced different style rules for different media types. Media queries can be used to check many things:
- width and height of the viewport
- width and height of the device
- Orientation
- Resolution
There are many types of media types which are listed below:
Media Type |
Description |
all |
It is used for all media devices. |
print |
It is used for printers. |
screen |
Used for computer screens, smartphones, etc. |
speech |
Used for screen readers that read the screen aloud. |
A media query consists of a media type that can contain one or more expressions that can be either true or false. The query’s result is true if the specified media matches the type of device the document is displayed on. If the media query is true then a style sheet is applied.
Syntax:
@media not | only mediatype and (expression) {
// Code content
}
@media screen and (min-width: 720px) {
body {
background-color: crimson;
}
}
@media screen and (min-width: 720px) {
#rightsidebar {width: 300px; float: right; height: 150px}
#main {margin-right: 200px;}
}
This code snippet ensures that a menu will float to the left side of the page when the viewport is 720 pixels wide or wider. If the viewport is less than 720 pixels, the menu will be positioned on top of the content.
Example: This example demonstrates the implementation of the CSS media queries with the different device width for making it responsive.
HTML
<!DOCTYPE html>
< html >
< head >
< title >CSS media query</ title >
< style >
body {
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
@media screen and (max-width:800px) {
body {
text-align: center;
background-color: green;
}
.gfg {
font-size: 30px;
font-weight: bold;
color: white;
}
.geeks {
color: white;
}
}
@media screen and (max-width:500px) {
body {
text-align: center;
background-color: blue;
}
}
</ style >
</ head >
< body >
< div class = "gfg" >
GeeksforGeeks
</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
</ body >
</ html >
|
Output: The output shows the color change with respect to the defined screen width.
There are many features of media query which are listed below:
Features |
Description |
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 the 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. |
Supported Browsers:
Last Updated :
07 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...