CSS media queries - GeeksforGeeks

03 Nov, 2021
The Media query in CSS is used 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 breakpoint specifies for what device-width size, the content is just starting to break or deform.
Media queries can be used to check many things:
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 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
}
Example: This example illustrates the CSS media query 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: From the output, we can see that if the max-width of the screen is reduced to 800px then the background color changes to green & if the max-width of the screen is reduced to 500px then the background color will turn to blue. For the desktop size width, the background color will be white.
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.
Supported Browsers: The browser supported by CSS media query are listed below:
Chrome 21.0 and above
Mozilla 3.5 and above
Microsoft Edge 12.0
Opera 9.0 and above
Internet Explorer 9.0 and above
Safari 4.0 and above
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
CSS-Advanced
Picked
Technical Scripter 2018
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?