Web design _9_css common layout, responsive

The flexibility of a complete page and its components.

How to use CSS to achieve the free expansion and contraction of the columns page regardless of how the screen, window, and font size changes.

Deciding whether to use a flow layout, a flexible layout, or a fixed-width layout depends on the characteristics and requirements of the project.

Fluid layout

<DivID= "Wrap"><Headerrole= "banner"><H1>Header Goes Here</H1></Header><DivID= "Content"role= "Main">... content goes here ...</Div><DivID= "sidebar"role= "Complementary">... sidebar goes here ...</Div><Footerrole= "ContentInfo">... footer goes here ...</Footer></Div><!--End #wrap -

1. By floating and width set to percent

Content left floating in the main area (if there are two columns within the region, floating around separately)

Next column sidebar right float

Footer Footer Area Note clear both sides floating

Set the width to a percentage, but when you add an inner margin in px, it causes the width to be too wide

Solution:

Add Box-sizing:border-box in #main and #siderbar to indicate that width widths contain border

-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;

IE8 the following incompatible box-sizing can be done by adding a div to the #mian and #siderbar, by adding pading to the div instead of #main and #siderbar operations.

2. max-width and Min-width can be set to limit the page range to prevent too large or too small layout dimensions.

For areas with a picture or width limit, the max-width and min-width settings can be set (IE6 not supported)

#wrap {        max-width: 960px;         margin: 0 Auto;         padding: 0 30px;    }

For images or media embedded within a page, you can also set max-width:100% to prevent oversized problems.

3. Text is set to a percentage unit, such as 100% or 62.5%, and for Line-height can be set to multiples, such as 1.3/1.4, can ensure that the font has a good flexibility.

4. Media Enquiry

For a multi-device screen, tell the device to set the width of the layout to width of the browser device

<name= "Viewport"  content= "width=device-width"/> 

Different layout styles when setting different page widths with media queries

/* When the page is less than 800px, cancel the left and right floating of #mian and #sidebar, Width automatically, become a single-column layout, reduce the font line higher */

@media screen and (max-width:800px) {    #main, #sidebar {        float: none;         Width: auto;         padding: 0;         font-size: . 9em;         line-height: 1.5;    }     }/* When the page width is less than 550px, it is often necessary to center the logo, set a small amount of space on both sides, change the font line higher * *

@media screen and (max-width:550px){#wrap {padding:0 15px; }#special{Padding-left:15px;Padding-right:15px;font-size:1.2em;Line-height:1.3; }#main H1{font-size:1.2em;Line-height:1.4; }footer[role= "ContentInfo"] p{Margin-right:20px;Margin-left:20px; }    }

Web design _9_css common layout, responsive