Application of media queries and changes in css3_html/css_WEB-ITnose

CSS has always supported setting style sheets associated with media. They can be adapted to display different media types. For example, the document uses sans-serif fonts when displayed on the screen and serif fonts when printed. Screen and print are two predefined media types.

In HTML4, the media style sheet is written as

<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 functions of media types, allowing for more precise styles. Table tags, media queries consist of media types and several expressions, which are responsible for checking conditions for specific media characteristics. Through media queries, we can adapt the document display to a specific output device without modifying the content of the web page. A media query is a logical expression that evaluates to true or false. If the media type of the media query matches the media type of the device where the user client is located, and all expressions of the media query are true, then it returns true.

Here are some examples of media queries:

<--!应用于支持指定特性（彩色）的特殊媒体类型（‘screen’）--><link rel="stylesheet" media="screen and (color)" href="example.css"><!--写在CSSd @import-rule语句中-->@import url(color.css) screen and (color);

There is a shorthand syntax that applies to all media types, in which the keyword all and the following 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;}}

Media There are many query features, as follows:

width and device-width;

height and device-height;

orientation;

aspect-ratio and device-aspect-ratio;

color and color-index;

monochrome (equal to 0 if not a monochrome device);

resolution;

scan;

grid (referring to whether the output device is raster or bitmap).