Css3:media Queries

Media queries is one of the most revolutionary features of CSS3, which allows our website to be adapted to a wide range of different devices. Specifically, developers can use media queries to identify device environments and then apply different CSS rules based on different device environments, enabling different layouts and skins to be used under different devices.

Grammar

There are three ways to apply media queries:

1. Use Media properties when introducing CSS files

<href= "File.css"  rel= "stylesheet"  media= "logic Media and (expression)>

2. Using @import directives in a CSS file

@import url (' file.css ') logic media and (expression);

3. Using @media directives in a CSS file

{}

When the device environment conforms to the logic media and (expression) description, the corresponding CSS will take effect or be applied. In the first case, the whole file.css will take effect; in the second case, the entire file.css will take effect; in the third case, all the CSS in the curly braces takes effect.

logic can take a value of not, only.

Media is the medium type, most commonly used for screen and print, respectively, for the screens and printing environments, and the default is all.

expression is the judgment of the device characteristics, such as height, width, etc., which are described below.

/*in the print environment, the PRINT.CSS takes effect*/<link href= "print.css" rel= "stylesheet" media= "print" >/*Notprint.css for non-printing environments*/@import url (' notprint.css ') not print;/*the corresponding CSS takes effect only if it is in the screen environment and the window size is at least 1000px*/@media only screen and (min-width:1000px){#example {Background-color:Red; }}/*multiple media queries, delimited*/@media screen, print{#example {Background-color:Red; }}

Media Features

Expression above is a media features expression that describes the characteristics of the device, with the syntax of @media (feature:value) { rules } . Feature represents the feature name, value is its values, see above for example.

Here are all the features provided by media queries, which I have sorted by practicality.

Width and Height

Represents the width and height of the Web page render window, which is the size of the browser display area.

{}

The eigenvalues support both the max-and min-prefixes, for example:

{}{}

Pixel Ratio

Pixel ratio or resolution, here pixel Ratio is actually device Piexel Ratio (DPR), which means the ratio of physical pixel points to logical pixels.

For example, the iphone 5S, the physical resolution is 640*1136, but its CSS resolution is 320*568. That is, it has a logical resolution of 320*568,DPR of 2, that is, two horizontal physical pixels and two vertical physical pixels, constituting a logical pixel point.

Figure 1:DPR 1 (left), DPR 2 (Medium), DPR 3 (right)

In most cases, developers do not need to be concerned about the physical resolution of the device, both text and vector images will perform well, but non-vector images will have serious distortion in the high-split screen. A common picture, in the DPR for 2 of the device, the equivalent of the image magnified twice times, the user can obviously feel blurred.

At this point, media queries comes in handy, and you can use this syntax to determine the device's DPR @media Media and (Resolution:value) { rules } .

The units of value are: dots per inch (DPI), dots per centimeter (DPCM), or more intuitive for us, dots per pixel (DPPX).

{}{}{}

So, in the case of dpr=2, we can use twice times the resolution of the Picture:

1{ background-image: url (' image.png ');} 2  {3    div {background-image: url (' image-2x.png ');} 4 }

Compatibility

Chrome, Firefox, ie + + support resolution Media Feature, but IE does not support DPPX units. To be compatible with IE, you can use DPI as the Unit (Standard screen DPI is 96), for example:

{}

In addition, Safari does not support resolution and uses -webkit-device-pixel-ratio instead:

{}

Device Width and Height

These two properties detect the width and height of the device screen and are not of high practical value. The width and height here refer to the physical pixels of the device.

{}{}{}{}{}{}

Orientation

Device Orientation: Landscape or portrait. When wide > high, the device is landscape mode, and conversely, the portrait mode. This feature is useful for handheld devices.

{}{}

Aspect Ratio

Aspect ratios, such as 16/9,16/10. Aspect-ratio represents the width-to-height ratio of the browser, while Device-aspect-ratio represents the device's aspect ratio.

{}{}{}{}{}{}

{...}

Note that the iphone will feed back the same aspect ratio in the landscape and portrait modes, while others will return different aspect ratios under different orientation.

Css3:media Queries