The @media CSS at-rule is used to apply a different set of styles for different media/devices using the Media Queries. A Media Query is mainly used to check the height, width, resolution, and orientation(Portrait/Landscape) of the device. This CSS rule is a way out for making more out of responsive design by delivering a more optimized design for a specific screen type or device i.e. smartphone, or PC. The media queries can also be used for specifying certain styles only for printed documents or for screen readers.
Syntax:
@media not|only mediatype and (media feature and|or|not mediafeature)
{
// CSS Property
}Used Keywords:
- not: It reverts the entire media query.
- only: It prevents the older browser(unsupported browsers) from applying the specified styles.
- and: It is used to combine two media types or media features.
Media Types:
- all: It is the default media type. It is used for all media type devices.
- print: It is used for printer devices.
- screen: It is used for computer screens, mobile screens, etc.
- speech: It is used for screen readers that read the page.
Media Features: There are many media features in Media Query some of them are listed below:
- any-hover: Any available input mechanism allow the user to hover over any element.
- any-pointer: It defines that any available input mechanism as a pointing device, and if so, how accurate is it?
- any-ratio: It is used to set the ratio between width and height of the viewport.
- color: It is used to set the color components of the output devices.
- color-gamut: It is used to set the color range that is to support by the user agent or in output devices.
- color-index: It is used to set the number of colors that the device can display.
- grid: It is used to specify the size of rows and columns.
- height: It is used to set the height of the viewport.
- hover: It allows the user to hover over any elements.
- inverted-colors: This defines does any device inverting colors
- light-level: It defines the light level.
- max-aspect-ratio: It is used to set the max ratio of width and height.
- max-color: It is used to set the maximum number of bits per color component for an output device.
- max-color-index; It is used to set the maximum number of colors that the device can display.
- max-height: It sets the max height of the browser display area.
- max-monochrome: It is used to set the maximum number of bits per “color” on a monochrome device.
- max-resolution: It is used to set the max resolution of the output device.
- max-width: It sets the max-width of the browser display area.
- min-aspect-ratio: It is used to set the min ratio of width and height.
- min-color: It is used to set the minimum number of bits per color component for an output device.
- min-color-index; It is used to set the min number of colors that the device can display.
- min-height: It sets the minimum height of the browser display area.
- max-monochrome: It is used to set a maximum number of bits per “color” on a monochrome device.
- min-resolution: It is used to set the min resolution of the output device.
- min-width: It sets the minimum width of the browser display area.
- monochrome: It is used to set the number of bits per “color” on a monochrome device.
- orientation: It is used to set the orientation of the viewport that landscape or portrait.
- overflow-block: It is used to control the situation when the content overflows the viewport.
- overflow-inline: It is used to control the situation when the content overflows the viewport along the inline axis be scrolled.
- pointer: It is a primary input mechanism for a pointing device.
- resolution: It sets the resolution of the device using dpi or dpcm.
- scan: It is used to do the scanning process of the output devices.
- scripting: Is there any scripting available like JS.
- update: It is used to update quickly update the output devices.
- width: It is used to set the width of the viewport.
Example: This example illustrates the use of the @media rule to implement the various styling properties based on the result of one or more media queries. The @media rule will only work if the media query matches the device on which the content is being used.
<!DOCTYPE html><html>
<head>
<title> CSS @media rule </title>
<style>
@media screen and (max-width: 600px) {
h1,
h2 {
color: green;
font-size: 25px;
}
p {
background-color: green;
color: white;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS @media rule</h2>
<p>GeeksforGeeks: A computer science portal</p>
</body>
</html>
|
Output: From the output, we can see when screen width resizes less than or equal to 600px then the text color also changes to green.
Supported Browsers: The browser supported by the @media rule are listed below:
- Google Chrome 1.0
- Internet Explorer 6.0
- Microsoft Edge 12
- Firefox 1
- Opera 9.2
- Safari 3.0