Media queries syntax Summary

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 allows devices that do not support mediaqueries but can read mediatype 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 devices that do not support mediaqueries but can read the mediatype type, this style file is ignored when the only keyword is encountered.

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.

 

 

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.

 

 

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 mobile phones also support media.
Queries features.

 

This article is excerpted by Tang Jun from HTML5 mobile Web Development Guide

Book details: http://blog.csdn.net/broadview2006/article/details/7609750