YouTip

# CSS3 Media Queries * * * ## CSS2 Media Types The `@media` rule was introduced in CSS2, allowing different style rules for different media types. For example: You can set different style rules for different media types (including monitors, portable devices, TVs, etc.). However, these media types are not yet well supported on many devices. * * * ## CSS3 Media Queries CSS3 media queries inherit all the ideas from CSS2 media types: Instead of looking for device types, CSS3 adapts the display based on settings. Media queries can be used to detect many things, such as: * The width and height of the viewport * The width and height of the device * Orientation (landscape or portrait on smartphones). * Resolution Currently, media queries are widely used for Apple phones, Android phones, tablets, and other devices. * * * ## Browser Support The numbers in the table indicate the first browser version that supports the property. | Property | | | | | | | --- | --- | --- | --- | --- | --- | | @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 | * * * ## Media Query Syntax A media query consists of multiple media types and can contain one or more expressions, which return true or false based on whether the conditions are met. @media not|only mediatype and (expressions) {CSS Code...; } If the specified media type matches the device type, the query returns true, and the document will display the specified style effects on the matched device. Unless you use the not or only operators, all styles will be applied to display effects on all devices. * **not:** not is used to exclude certain specific devices, such as @media not print (non-print devices). * **only:** is used to specify a particular media type. For mobile devices that support Media Queries, if the only keyword exists, the mobile Web browser will ignore the only keyword and directly