css014 Responsive web Design

css014 Response Type Web Design

First, Response Type Web basic knowledge of design

1, RWD three ideas: A, for the layout of the elastic network, B, for pictures and video of the elastic Media, C, for different screen width created by different styles of CSS media query.

Second, to be RWD Building Web pages

1, mobile browser in order to ignore the mobile browser screen smaller font also become smaller behavior, you can add a line of code in the head:

<meta name= "viewport" content= "Width=vedice-width" >

It is best to add before <title></title>.

Third, Media Enquiry

1. Strategies for using Media queries

Adjustment column: Adjust the column to the number of mobile phone adaptation;

Elastic width: On the phone, the width is best set to auto or 100%

Compact white space: use margin and padding to reduce white space and avoid layout fragmentation

Adjust font size: Adjust font size appropriately

Modify the navigation menu: use JavaScript to dynamically turn the navigation bar into a drop-down menu.

To hide content on a handheld device:

Use background Image:

2. Create breakpoints

3. Create Media queries

4. Include the query in the style sheet

A. Using the @import directive

@import URL (css/small.css) (max-width:320px);

B. Embed media queries in style sheets

@media (max-width:480px) {

body{

/*style Properties Go here*/

}

. style{

/*style Properties Go here*/

}

}

Four, Elastic Mesh

Importance of HTML source code order

Resetting the box model

Convert fixed width to elastic mesh

Five, Streaming Pictures

1. Add the following styles to the style sheet

img{

max-width:100%;

}

2. Find each tag in Ⅱ, delete the height and Width properties

css014 Responsive web Design