CSS Media Queries
Last Updated :
04 Apr, 2024
CSS Media Queries is a powerful tool that allows developers to create responsive web designs. They enable the styling of elements to adapt based on the characteristics of the device displaying the webpage.
Media queries are a feature of CSS that apply specific styles based on the characteristics of the user’s device or viewport. These characteristics can include screen width, height, orientation, resolution, and more. The result of a media query is either true or false, and if true, the specified style sheet is applied.
The breakpoints in @media specify 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. |
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. |
Creating Responsive Designs with Media Queries
By using media queries, developers can create web designs that adapt to different screen sizes and media types. This means that the view of a web page can differ from system to system based on screen or media types. This adaptability enhances the user experience, ensuring that web pages look good and function well on all devices.
In conclusion, mastering CSS media queries is crucial for creating responsive web designs. They provide the flexibility to style elements differently based on the characteristics of the device displaying the webpage, leading to a better user experience.
Supported Browsers:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...