|(Optional) This is the type of media. Could be anything in the range of |
|(Optional) Doesn't apply the CSS for this particular media type and applies for everything else.|
|Logic to identify use case for CSS. Options outlined below.|
|Describes the aspect ratio of the targeted display area of the output device.|
|Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.|
|Indicates the number of entries in the color look-up table for the output device.|
|Determines whether the output device is a grid device or a bitmap device.|
|The height media feature describes the height of the output device's rendering surface.|
|CSS will not apply on a screen width wider than specified.|
|CSS will not apply on a screen width narrower than specified.|
|CSS will not apply on a screen height taller than specified.|
|CSS will not apply on a screen height shorter than specified.|
|Indicates the number of bits per pixel on a monochrome (greyscale) device.|
|CSS will only display if device is using specified orientation. See remarks for more details.|
|Indicates the resolution (pixel density) of the output device.|
|Describes the scanning process of television output devices.|
|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).|
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
<meta name="viewport" content="width=device-width, initial-scale=1">