CSS Media Query

First, a snippet of code:

<! DOCTYPE html>
The top uses the CSS media query, the browser will vary depending on the viewport, to change the body color: Media query allows us to set the corresponding style according to the various features of the device. In addition to this, you can use the @import directive to introduce other style sheets conditionally in the current style sheet. @import url ("phone.css") screen and (max-width:768px). [!!!: @import of CSS will increase HTTP requests].
What features can be detected by media queries:
The most commonly used is width (viewport width) device-width (screen width)
In addition, there are: orientation (check the device landscape or portrait) Aspect-ratio (based on the viewport aspect ratio.) A 16:9 scale display can be ASPECT-RATIO:16/9 like this) Device-aspect-ratio (similar to Aspect-ratio. such as Typically, Max-device-width is used for mobile device users, and Max-width is used for PC device users.
Use media queries to transform our design:
CSS represents cascading style sheets, that is, the style sheet behind the style will overwrite the front of the style, so we can first for the large viewport design, and then use the media query rewrite.
The best way to load media queries:
@media screen and (max-width:768px) {}. Respond.js adds media queries for IE8 and earlier, but does not support @import. If you use link, you will increase the number of HTTP requests.
Content reference to: Responsive web design HTML5 and CSS3 combat.
CSS Media Query