Stats

673 Contributors: 20
2017-07-05
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook

Media Queries

Download css eBook

Syntax

  • @media [not|only] mediatype and (media feature) { /* CSS rules to apply */ }

Parameters

ParameterDetails
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 featureLogic to identify use case for CSS. Options outlined below.
Media FeatureDetails
aspect-ratioDescribes the aspect ratio of the targeted display area of the output device.
colorIndicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.
color-indexIndicates the number of entries in the color look-up table for the output device.
gridDetermines whether the output device is a grid device or a bitmap device.
heightThe height media feature describes the height of the output device's rendering surface.
max-widthCSS will not apply on a screen width wider than specified.
min-widthCSS will not apply on a screen width narrower than specified.
max-heightCSS will not apply on a screen height taller than specified.
min-heightCSS will not apply on a screen height shorter than specified.
monochromeIndicates the number of bits per pixel on a monochrome (greyscale) device.
orientationCSS will only display if device is using specified orientation. See remarks for more details.
resolutionIndicates the resolution (pixel density) of the output device.
scanDescribes the scanning process of television output devices.
widthThe 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 FeaturesDetails
device-aspect-ratioDeprecated 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-widthDeprecated Same as max-width but measures the physical screen width, rather than the display width of the browser.
min-device-widthDeprecated Same as min-width but measures the physical screen width, rather than the display width of the browser.
max-device-heightDeprecated Same as max-height but measures the physical screen width, rather than the display width of the browser.
min-device-heightDeprecated 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">


Related Examples