Media query of Responsive web pages

Responsive web pages are especially important because today's Web pages are compatible with a variety of PC sizes and ipad and even phone screens. Hand-written responsive web page, specific technical points are:

1. declaring the viewport meta tag (responsive web-page prerequisites)
<meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no" >
The height of the width-viewport width height-viewport
Initial-scale-Initial zoom ratio
Minimum-scale-Minimum scale to allow the user to zoom
Maximum-scale-Maximum scale to which the user is allowed to zoom
User-scalable-whether the user can manually scale

2. images in the page should be used in response to images such as:
img{width:50% (the proportion of the picture in the parent element) max-width:50%;(in the parent container, and cannot exceed the size of the picture itself--to prevent the image from being infinitely enlarged to produce distortion)}

3. using streaming layouts (layout elements use floating or inline fast)

4. Avoid using absolute dimensions such as PX, using relative units of EM or REM;
EM: The font size relative to the parent element
REM: Font size relative to root directory

5.using Css3mediaquery technology (most important)
Media: Refers to the device browsing the web, such as: Screen (Pc/pad/phone/watch/print/tv/projection/tty (pin printer/cmd)/braille (reading software) ...)
Mediaquery: Query The current browse device type, resolution, color depth, direction (landscape/portait) and so on.
CSS3 mediaquery: Depending on the features of the current browsing device, some CSS styles are selectively executed, and some other styles are ignored.
There are two ways of doing this:
1. Selective execution of certain external CSS files
<link media= "screen and (min-width:768px) and (max-width:991px)" rel= "stylesheet" href= "Css/pad.css"/>
Features: Only the media query results are true external style files will be executed, otherwise do not execute! Insufficient: Even if it does not conform to the external style file of the current browsing device, it will be requested by the browser!
2. Selectively perform some of the styles in a section of CSS
@media screen and (min-width:768px) and (max-width:991px) {
. box {
margin:6px;
...
}
}

Media query of Responsive web pages