Using media query to implement responsive design

Your Web page will look good on your phone. The mystery of completing this task is called responsive Design, and media query is the key to implementing a Web page response.

On the computer an example:

<Divclass= "Row">     <Divclass= "Span4">...</Div>     <Divclass= "Span4">...</Div>     <Divclass= "Span4">...</Div></Div>

CSS style:

. Row {  width:100%;} . Span {  width:300px;   float:left;   margin-left:30px;}

This is displayed on the computer, is normal, on a certain device layout is not what we expect.

Media Query

Sets the criteria for applying the appropriate style outside of the CSS. There are some features that you can use to decide which styles to apply. Here are some of the important parts:

. Width

. Height

. Device width

. Device height

. Resolution

. Orientation

. Aspect ratio

Determines what style to use by device width. The appropriate rules below.

@media (max-width:500px)

Use a CSS style when the screen width is less than 500px. This style condition is true before it is referenced.

There are three different ways to apply this conditional rule:

1, <link> tag

as follows: <lin rel = "Stylesheel" type= "text/css" media= "screen and (max-width:500px)" href= "Test.css" >

2. Media condition

A piece of CSS code can be enclosed in curly braces, and the CSS definition works only when media query satisfies the following criteria:

@media screen and        (max-width:500px){            . row{                     width:100%;  } 　　　　　　　       . span{ width:auto;  Float:left; 　　　　　　margin:0; }       }　

3. Import condition

A reference only imports the external CSS when the media query condition is satisfied. CSS styles defined in an external file are only valid if the condition is satisfied.

@import url ("test.css") screen and (max-width:500px);

We can use media query to change the layout of the page, but it is also possible to use them to make CSS definitions similar to the conditions. We often change the font size, image quality, whitespace and other elements

To better adapt to different types of equipment.

Using media query to implement responsive design