Media Constrain of Display Screen [Source: http://line25.com]

media_query_list: [, ]*
media_query: [[only | not]? [ and ]*]
| [ and ]*
expression: ( [: ]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| aspect-ratio | min-aspect-ratio | max-aspect-ratio
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid

The variety of media display indicates the importance of detecting the media constrain. A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features (see to aforementioned scripts), such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

Taking the media feature of “device-width” for example, here listed the HTML/CSS media query for different types of media display, see to the sample sources as follows.

<!----- HTML ------>
<!-- In head of HTML, get the screen width from the width of the device-->
<!-- and initialise the scale to 1.0 -->
<meta name="viewport" content="width=device-width; initial-scale=1.0">

/*----- CSS ------*/
@media screen and (max-width: 320px) {/*Customised CSS*/} /* 320px portrait width of smartphones */
@media screen and (max-width: 768px) {/*Customised CSS*/} /* 768px portrait width of tablets */
@media screen and (max-width: 1024px) {/*Customised CSS*/} /* 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions */