Media queries syntax Summary

The media queries syntax is as follows:

@media [media_query] media_type and media_feature 

 

When using the media queries style module, it must start with "@ media.

Media_query indicates the query keyword. The not keyword and only keyword can be used here. The not keyword indicates that a reverse operation is performed on the subsequent style expressions. For example, the following code:

@media not screen and (max-device-width:480px) 

 

The only keyword is used to allow devices that do not support media queries but can read the media type to ignore this style. For example, the following code:

@media only screen and (max-device-width:480px) 

 

For mobile devices that support media queries, if the only keyword exists, the Web browser of the mobile device ignores the only keyword and applies the style file directly according to the following expression. For a web browser that does not support media queries but can read the media type, the style file is ignored when the only keyword is used.

Although the media_query type is not a required type in the entire media queries syntax, it is sometimes a very important query parameter type in the actual development process.

The media_type parameter specifies the device type, which is usually called the media type. In fact, this media type has been defined in css2.1. Table 6-1 lists the 10 device types that can be defined by media_type.

Table 6 1 List of available media_type Devices

Media_type	Device type description
All	All devices
Aural	Auditory Device
Braille	Point-to-Point tactile Device
Handled	Portable devices, such as mobile phones and tablets
Print	Print preview charts, etc.
Projection	Projection Device
Screen	Monitors, laptops, mobile terminals, and other devices
Tty	Devices such as typewriters or terminals
TV	TV and other device types
Embossed	Braille printer

Media_feature is mainly used to define the device features in CSS. Most mobile device features allow the prefix of min/max. For example, Min-width indicates that the value is greater than or equal to this value; max-width indicates that the value is less than or equal to this value.

Table 6-2 lists the features of media_feature devices.

Table 6 2 media_feature device features

Backup features	Allowed or not Min/MAX Prefix	Special Value	Description
Width	Allow	Value in Unit	Specify the width of the browser window, For example, 480 pixels
Height	Allow	Value in Unit	Specify the height of the browser window, For example, 320 pixels
Device-Width	Allow	Value in Unit	Screen score of a mobile device Resolution width, such as 480 pixels
Device-height	Allow	Value in Unit	Screen score of a mobile device Resolution height, such as 320 pixels
Orientation	Not Allowed	String Value	Specifies the window direction of the mobile device browser. Only portrait (portrait) and landscape can be specified. (Horizontal) two values
Aspect-radio	Allow	Proportional value	Specify Aspect ratio, for example, 16: 9
Device-aspect-radio	Allow	Proportional value	Specifies the screen resolution of a mobile device. Aspect ratio, for example, 16: 9
Color	Allow	Integer	Specifies the number of BITs used by the mobile device.
Color-Index	Allow	Integer	Number of colors in the specified color table
Monochrome	Allow	Integer	Specify the number of bytes per pixel in a monochrome frame buffer.
Resolution	Allow	Resolution Value	Specifies the screen resolution of a mobile device.
Scan	Not Allowed	String Value	Specifies the scanning method of a television device. Only two values can be specified: Progressive table Indicates line-by-line scan and interlace indicates line-by-line scan.
Grid	Not Allowed	Integer	Specify whether the device is based on a grid or a bitmap. The value is 1 when it is based on the grid. Otherwise, the value is 0.

So far, the media queries style module has been supported by most modern browsers on the desktop. For example, ie 9, Firefox, Safari, chrome, and operabrowser. However, only the latest version of the IE series browser supports this feature. Versions earlier than IE8 do not support media queries.

For mobile platforms, Web browsers Based on Android and IOS have also been well supported. Blackberry also supports the media queries feature.

 

From http://book.51cto.com/art/201204/328362.htm