Summarize CSS3 new features (Media enquiry)

CSS3 Media Query is the expansion of the CSS2 media type, perfect;

The media type of CSS2 only defines the keywords of some devices, and the CSS3 media query further expands the attributes such as Width,height,color and other values.

The difference between media query and media type is that media query is a value or a range of values, and media type is just a match for the device (so media type is a word, and media query needs to follow a number, and both can Mixed use);

Media is available for link tag properties [media]

  <rel= "stylesheet"  type= "text/css"  href= ". /css/print.css "  media=" Print and (max-width:600px) "/>

and CSS files, the bottom code is the use of CSS within the media;

Describes the available operators & Common media type and media query:

Operator: and:

The AND operator is used to match the rules on both sides of the symbol.

{/* match a computer screen with a width less than 600px */}

Not

The NOT operator is used to take non, all matches that do not satisfy the rule

{/* matches all devices except the printer */}

When using not, be aware that, without parentheses, there may be some strange phenomena, for example:

{}/* is equivalent to */{}/* instead of */{}

Therefore, if you want to use not, or explicitly add parentheses more explicit points

, (comma):

Equivalent to or for a match on both sides

{/* match a computer screen or a device with a width greater than 800px */}

Media Type (say only a few common ones, the rest will give a link): All:

All is the default value, matching all devices;

{/* can filter browsers that do not support media */}

Screen:

Match the computer screen;

Print:

Match printer (will also match when print preview) [My CV has a set of styles specifically for print ~]

Commonly used in this three type, the remaining media type is interested in seeing the W3school instructions or W3 documentation

Media query (also known as some common)://Note that media query must have parentheses, and a parenthesis is a querymax-width (max-height):

{/* match a device with an interface width less than 600px */}

Min-width (min-height):

{/* match a device with an interface width greater than 400px */}

Max-device-width (max-device-height):

{/* match device (not interface) with device width less than 800px */}

Min-device-width (min-device-height):

{/* match device (not interface) with device width greater than 600px */}

Do mobile development with device-width/device-height, a bit better, because some mobile browsers default on the page to do some scaling, so according to the device's wide-height to match will be closer to the desired effect of development;

Gives a link to all Media query property values W3 's documentation can also look at the MDN, there are volunteers to Chinese the MDN Media query document

Media can be nested:

{    /* Universal style *    /@media (max-width:600px        ) {/*  This bar matches a non-printer device with a width less than 600px */         }    {/        * This matches a non-printer device with a width greater than 600px */         }}

This eliminates the need to write not print two times redundancy. This also has some benefits, because some browsers may only support media Type and not media query--(Don't ask me why I know, planted a pit)

The unit of the value of Media Query (which only refers to the top) can be PX em rem (%/vh/vw/vmin/vmax or not) ... The feeling should be no use ...);

Media query is the core of the responsive page, in fact, the response page is to show different effects at different resolutions;

Writing responsive page CSS is divided into small to large (size);

I weak weak recommended to start from small size Media Query using the max-series, large-scale reverse;

Where there are errors and shortcomings in this article please point out;

Summarize CSS3 new features (Media enquiry)