The application of media query and the change in CSS3

CSS always supports setting the style sheet associated with the media. They can be adapted to the display of different media types. For example, the document uses the Sans-serif font when the screen is displayed, and the serif font when printing. Screen and print are two pre-defined media types.

In HTML4, the format of the media style sheet is

<link rel="stylesheet"Type="Text/css"Media=" Screen"href="Sans-serif.css"><link rel="stylesheet"Type="Text/css"Media="Print"href="Serif.css">

In CSS3, media queries extend the functionality of media types to more precise style sheet labels, where media queries consist of media types and several expressions that are responsible for examining the conditions of specific media characteristics. With media queries, we do not need to modify the content of the Web page to make the document display adaptable to a particular output device. A media query is a logical expression with the result of true or false. If the media query media type matches the device media type of the user client, and all the expressions for the media query are true, it returns true.

Here are some examples of media queries:

<--! applied to special media types (' screen ')--><link rel="stylesheet" media= "that support specified attributes (color ) Screen and (color) " href="example.css"><!--written in the CSSD @import-rule statement--@import URL ( COLOR.CSS) screen and (color);

There is a shorthand syntax for all media types, where the keyword all and subsequent and can be omitted.

@media (Orientation:portrain) {...} @media All and  (Orientation:portrain) {...}

Designers and developers can use this approach to create complex queries that meet specific needs:

@media all and (max-width:698px) and (min-width:520px), (min-width:1150px) {    body{    background: #ccc;}}

There are many features of media queries, as follows:

Width and device-width;

Height and device-height;

Orientation

Aspect-ratio and Device-aspect-ratio;

Color and Color-index;

Monochrome (if not monochrome device, equals 0);

Resolution

Scan

Grid (refers to the output device is a raster or bitmap type).

The application of media query and the change in CSS3