Media queries common introduction and compatibility problem solving

Media query medium queries, responsive layout of the sharp edge.
This article contains two pieces of content:
One, Common introduction
Second, how to solve the problem that IE does not support

First, commonly used introduction
If you have the ability to crossing (strongly recommended), the following introduction (the common part) can not be looked at, address: https://www.w3.org/TR/css3-mediaqueries
1, two common types of introduction
A, via link media = "type and (attribute)"
B, @media type and (attribute) in CSS
Note: Type:screen print all ... attribute:max-width, min-width,... Multiple attribute can be again and (attribute)

2, commonly used type and attribute
Media queries are commonly used in multi-screen adaptive, so the type on the use of many screens, if there is no special qualification can be used all meaning all types under the effective
Attribute commonly used: Max-width: Values + units for maximum length within the effective, as well as the min-width meaning minimum length range within the effective
Both can be used at the same time to implement code under the screen width within two boundaries.

Second, IE compatibility issues

IE low version, not supported.
Project needs to be compatible ie7+ GitHub found a plug-in Https://github.com/scottjehl/Respond can be implemented compatible ie6+
Talk about the problems encountered: internal style, according to the use of the introduction, the corresponding JS file in the style behind, how also out of effect, after the introduction of external styles to solve the problem.

Attached: Common Introduction Demo

<! DOCTYPE html>  
1.css

P:nth-child (1) {
    color: #f00;
    font-weight:600;
}
 
2.css

P:nth-child (2) {
    color: #f0f;
}
 
3.css

@media screen{
    P:nth-child (3) {
        color: #727486;
    }
}
 
4.css

@import "3.css";
P:nth-child (4) {
    color: #0f0;
}
 
5.css

@media all and (min-width:500px) {
    P:nth-child (5) {
        color: #7093ff;
    }
}
@media all and (max-width:1000px) and (min-width:500px) {
    P:nth-child (5) {
        color: #ff8696;
    }
}
 
6.css

@media not print{
    P:nth-child (6) {
        color: #ffb778;
    }
}
 
7.css

 @media all and (orientation:portrait) {p{font-family: "Blackbody";
    font-size:32px;
        }} @media all and (Orientation:landscape) {p{font-family: "Arial";
    font-size:16px; }
}