CSS Media Queries
Syntax
- @media [not|only] mediatype and (media feature) { /* CSS rules to apply */ }
Parameters
| Parameter | Details |
|---|---|
mediatype | (Optional) This is the type of media. Could be anything in the range of all to screen. |
not | (Optional) Doesn't apply the CSS for this particular media type and applies for everything else. |
media feature | Logic to identify use case for CSS. Options outlined below. |
| Media Feature | Details |
aspect-ratio | Describes the aspect ratio of the targeted display area of the output device. |
color | Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero. |
color-index | Indicates the number of entries in the color look-up table for the output device. |
grid | Determines whether the output device is a grid device or a bitmap device. |
height | The height media feature describes the height of the output device's rendering surface. |
max-width | CSS will not apply on a screen width wider than specified. |
min-width | CSS will not apply on a screen width narrower than specified. |
max-height | CSS will not apply on a screen height taller than specified. |
min-height | CSS will not apply on a screen height shorter than specified. |
monochrome | Indicates the number of bits per pixel on a monochrome (greyscale) device. |
orientation | CSS will only display if device is using specified orientation. See remarks for more details. |
resolution | Indicates the resolution (pixel density) of the output device. |
scan | Describes the scanning process of television output devices. |
width | The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer). |
| Deprecated Features | Details |
device-aspect-ratio | Deprecated CSS will only display on devices whose height/width ratio matches the specified ratio. This is adeprecatedfeature and is not guaranteed to work. |
max-device-width | Deprecated Same as max-width but measures the physical screen width, rather than the display width of the browser. |
min-device-width | Deprecated Same as min-width but measures the physical screen width, rather than the display width of the browser. |
max-device-height | Deprecated Same as max-height but measures the physical screen width, rather than the display width of the browser. |
min-device-height | Deprecated Same as min-height but measures the physical screen width, rather than the display width of the browser. |
Remarks
Media queries are supported in all modern browsers, including Chrome, Firefox, Opera, and Internet Explorer 9 and up.
It is important to note that the orientation media feature is not limited to mobile devices. It is based on the width and height of the viewport (not window or devices).
Landscape Mode is when the viewport width is larger than viewport height.
Portrait Mode is when the viewport height is larger than viewport width.
This usually translates to a desktop monitor being in landscape mode, but can it sometimes be portrait.
In most cases mobile devices will report their resolution and not their real pixel size which can differ due to pixel density. To force them to report their real pixel size add the following inside your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
