CSS3 Media query-responsive layout

In this era of mobile phone, tablet and computer-centric Internet. In order to improve the user experience, making the page adapt to different screen resolution is the most important issue when we write the page. The media query function in CSS3 is a good help to solve this problem, it can be based on the size of the screen up and down to show the user a usable interface.

Just started to contact the media query This function, I feel it's strong, one side anxious how should I use it? First of all we have to have a detailed understanding and understanding of it.

A media query is a rule that defines a style sheet through different media types and conditions. Allows CSS to work more precisely on different media types and different conditions for the same media. Most media features of media queries accept Min and Max to express "greater than or equal to" and "small and or equal". Such as: Width will have min-width and max-width. Media queries can be used on @media and @import rules in CSS, and can also be used in HTML and XML. Media queries are currently supported by Google Chrome, Safari 3, Firefox 3.5, Opera 7, and Internet Explorer 9. At the same time we have to meet the needs of older browsers, as long as our main model table is provided without using media queries, then the page can be designed in all browsers.

　　Media Query Sample code:
@media screen and (width:800px) {...}
@media screen (max-width:800px) and (min-width:800px) {...}
@import URL (example.css) screen and (width:800px);
<link media= "screen and (width:800px)" rel= "stylesheet" href= "Example.css"/>
<?xml-stylesheet media= "screen and (width:800px)" rel= "stylesheet" href= "Example.css"?>

In the process of use, we can define 3 style settings or changes according to the large and small resolution of mobile phone, tablet and computer screen to achieve a higher user experience. The above is my opinion on media inquiries, welcome to the big God error correction points.

CSS3 Media query-responsive layout