css3-@media Responsive Media Queries (medium Querie)

With the increase and increase of the screen specifications of PC and mobile devices, the use of media query to make the page achieve different rendering effect can effectively solve the various demands of user experience and mobile Web development under different screen resolutions.

Media Queries: The function is to allow the addition of expressions to determine the environment of the media in order to apply a different style sheet. In other words, it allows us to change the layout of the page without changing the content to precisely fit or respond to devices of different resolutions. (screen size, use different CSS to refactor or develop the page, so that the page will adjust the layout according to the width of the screen)

first, understand viewport

Viewport: the visible area. For desktop browsers, we all know exactly what viewport is, that is, to remove all toolbars, status bars, scroll bars, and so on, to look at the area of the Web page, which is really a valid area. Because the mobile device screen width differs from the traditional web, the development needs to change viewport.

In layman's parlance, the viewport on a mobile device is the area of the device's screen that can be used to display our pages, and, in particular, the portion of the area that the browser (or possibly an app WebView) uses to display the page. But viewport is not limited to the size of the viewable area of the browser, it may be larger than the viewable area of the browser, or it may be smaller than the viewable area of the browser. By default, the viewport on a mobile device is generally larger than the viewable area of the browser, because the resolution of the mobile device is relatively small compared to the desktop, so that the traditional Web site designed for desktop browsers can be displayed properly on mobile devices. Browsers on mobile devices will set their default viewport to 980px or 1024px (and possibly other values, as determined by the device itself), but with the result that the browser will appear with a horizontal scroll bar, Because the width of the viewable area of the browser is smaller than the width of this default viewport.

common usage (control of viewport with meta tags):<Metaname= "Viewport"content= "Width=320,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;" /><Metaname= "Viewport"content= "Width=device-width,initial-scale=1.0,maximum-scale=1user-scalable=no;" /><Metaname= "Viewport"content= "Initial-scale=1.0,user-scalable=no,maximum-scale=1"Media= "(device-height:568px)" />Width-//viewport (range from 200 to 10,000, default to 980 pixels) height-//viewport (range from 223 to) Initial-scale-//Initial zoom ratio (range from >0 to ten) Minimum-scale-//minimum scale to allow the user to zoom to Maximum-scale-//allow the user to zoom to the maximum ratio user-scalable-//whether the user can manually indent (no,yes)

Note: There is also a very important concept about viewport: The iphone's Safari browser has no scroll bar at all, and it is not a simple "hide scroll bar", there is no such feature at all.

The iphone's Safari browser actually displays the page completely from the beginning, and then uses viewport to see a portion of it. When you drag with your finger, you actually drag the page instead of the viewport. The browser behavior changes more than the scroll bar, and the interaction event is not the same as the normal desktop.

Second, Media queries properties

In Css2, the media type property, which is used to determine the medium types.

In CSS3, the media query property is added to enhance the media type property. The media query property is enhanced with the media Type property (media query is an enhanced version of CSS3 for media type) so that media type can make conditional judgments about the output of the corresponding CSS.

(Media_type, Device type description) screen: Refers to the display, notebook, mobile and other device screens. Print: Refers to opaque media for the printer, print preview, and so on. Projection: Refers to the project used for display, the projection device. Braille: Braille system, refers to the tactile effect of printed matter, the point of touch device aural: Refers to the voice of electronic synthesizer, auditory devices. TV: Refers to the type of television type of media, television and other equipment. Handheld: Refers to handheld display devices (small screen, monochrome), portable devices, such as mobile phone, tablet all: suitable for all media, all devices. TTY: devices such as typewriters or terminals embossed: Braille printers

And , not, only keywords, and so on. 

You can actually think of media query as a media Type (judging condition) +css (Qualifying style rule):

// -- <  rel= "stylesheet"  media= "screen and (max-width:600px)"  href = "Small.css" /> //--@media screen and (max-width:600px) {    Selector {        Property: property value;    }}

In the statement structure above the statement, you can see that the media query and CSS Properties collection are similar, the main differences are:

1, Media query accepts only a single logical expression as its value, or no value;

2. CSS properties are used to declare how the page information is represented, and media query is an expression that determines whether the output device satisfies a certain condition;

3. The majority of Media query accepts the MIN/MAX prefix, which is used to indicate its logical relationship, and is applied to cases where the value is greater than or equal to or less than

4, CSS property requirements must have attribute values, Media query can have no value, because its expression returns only true or False two;

Note: A media query can contain between 0 and more expressions, and the expression can contain between 0 and more keywords, as well as a media Type.

Third, Media queries two ways to use:

(---directly in the link to determine the size of the device, referring to different CSS files;---directly in the <style> tag)

1, max width max width (screen<= 600px) <link rel= "stylesheet"Media= "screen and (max-width:600px)"href= "Small.css"type= "Text/css" />2, min width min width (screen >= 900px)<Linkrel= "stylesheet"Media= "screen and (min-width:900px)"href= "Big.css"type= "Text/css" />3, multiple media Queries (600px<= Screen <= 900px) <link rel= "stylesheet"Media= "screen and (min-width:600px) and (max-width:900px)"href= "Style.css"type= "Text/css" />

4, the device screen output width device width (for the maximum device width of 480px;max-device-width: The actual resolution of the device (that is, the visual area resolution)) <  rel= "stylesheet"  media= "screen and (max-device-width:480px)"  href  = "iphone.css"  type= "text/css"/>

5. IPhone4 (mobile device specifically for iPhone4)<Linkrel= "stylesheet"Media= "only screen and (-webkit-min-device-pixel-ratio:2)"type= "Text/css"href= "Iphone4.css" />6. ipad (in the case of large numbers, Safari on the mobile device is the same as on the iphone; the difference is that the ipad declares a different orientation) Portrait (portrait):<Linkrel= "stylesheet"Media= "All and (orientation:portrait)"href= "Portrait.css"type= "Text/css" />Transverse (Landscape):<Linkrel= "stylesheet"Media= "All and (Orientation:landscape)"href= "Landscape.css"type= "Text/css" />

7, Android: (for Android phones in different resolutions to provide a specific style, to resolve the screen resolution of different to the Android Phone page refactoring problem) (240px):<Linkrel= "stylesheet"Media= "only screen and (max-device-width:240px)"href= "Android240.css"type= "Text/css" />(360px):<Linkrel= "stylesheet"Media= "only screen and (min-device-width:241px) and (max-device-width:360px)"href= "Android360.css"type= "Text/css" />(480px):<Linkrel= "stylesheet"Media= "only screen and (min-device-width:361px) and (max-device-width:480px)"href= "Android480.css"type= "Text/css" />

8. Not keyword: (used to exclude a certain type of media (specific device), in other words, to exclude the expression of the device) (non-printing equipment):<Linkrel= "stylesheet"Media= "Not print and (max-width:1200px)"href= "Print.css"type= "Text/css" />9. Only keyword:<Linkrel= "stylesheet"Media= "only screen and (max-device-width:240px)"href= "Android240.css"type= "Text/css" />

(only used to set a specific media type that can be used to exclude browsers that do not support media queries.) In fact, only many times it is used to hide style sheets for devices that do not support media query but support media type. The main features are: devices that support media Queries, the normal invocation style, when only does not exist, and for devices that do not support media features (media Queries) but that support the medium type, which will not read the style, Because its first reads only instead of screen, and the browser does not support media qqueries, the style will not be adopted, whether or not it supports only. ）

In a nutshell: for devices that support media queries, if the only keyword exists, the device's Web browser ignores the only keyword and applies the style file directly to the following expression.  for devices that do not support media queries but are able to read a Web browser of type media type, the style file is ignored when the only keyword is encountered. 

10. Other uses: The Media Type is not explicitly specified , so it defaults toall:<Linkrel= "stylesheet"Media= "(min-width:701px) and (max-width:900px)"href= "Medium.css"type= "Text/css" />Alternatively, a comma (,) is used to denote a side-by-side or representation or, as follows (used on a handheld device with a width less than or equal to 480px, or for a device with a screen width greater than or equal to 960px)<Linkrel= "stylesheet"type= "Text/css"href= "Style.css"Media= "handheld and (max-width:480px), screen and (min-width:960px)" />

11. Compatibility:
Browsers that support Media Queries features: ie9+, Firefox, Chrome, and Safari. (mainly supports HTML5, CSS3 features)
Unfortunately, IE8 and older browsers do not support CSS3 Media Queries, but can be resolved using JavaScript.

Four: Common cell phone Resolution: (used as a responsive typesetting design)

1. Mobile Phone:

IPhone4, 4s screen size is 3.5 inches, screen resolution is 960*640iphone5, 5s screen size is 4 inches, resolution is 1136*640 Samsung Galaxy S4 Screen size is 5 inches, resolution is 1920*1080 Samsung Galaxy Note2 , S3 screen size is 5.5 inches and 4.8 inches, the resolution is 1280*720 Samsung Galaxy Note Screen size is 5.3 inches, resolution is 1280*800
Others are still in the finishing ...

2. Tablet:

ipad 4, ipad 5 screen size is 9.7 inches, resolution in 2048*1536.ipad Mini, ipad 2 screen size is 7.9 talent, resolution is 1024x768 Samsung Galaxy Note 10.1, Tab3.8, TAB2 P5100 screen size is 10.1 inches, screen resolution is 1280*800 Samsung Galaxy Tab P3110, Tab3.7 screen size is 7 inches, screen resolution is 1024*600 Google Nexus 7 screen size is 7 inches, screen resolution is 1280*800
Others are still in the finishing ...

The level is limited, the error in the text is unavoidable, welcome to criticize the suggestion comment. The article will revise and perfect the treatise on an irregular basis. Thank you!

This document is referenced from:
in-depth understanding of mobile front-end development viewporthttp://www.cnblogs.com/2050/p/3877280.html
CSS3 Media Queries for Responsive designhttp://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html
CSS3 Media Queries detailedhttp://swordair.com/details-on-css3-media-queries/
CSS3 Media Querieshttp://www.w3cplus.com/content/css3-media-queries
http://miliwo.com/w/1859/26045

css3-@media Responsive Media Queries (medium Querie)