div CSS Self-adapting

How to implement a responsive layout?

For this problem, we can use media query in CSS3, that is, media queries. Media queries allow 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 in CSS @media and @import rules, can also be used in HTML and XML. With this tag property, we can easily achieve a rich interface under different devices, especially mobile devices, will be more widely used.

First, let's allow the Web page width to adjust automatically.

In the header of the page code, add a row of viewport meta Tags:

<meta name= "viewport" content= "width=device-width, initial-scale=1"/>

Below we can get the width and height of different device screens through media query, so we can deal with them separately. Depending on the screen width of the device, different CSS settings are set. So here are two ways:

1, the style sheet of the outer Union

Here we can load different CSS style sheets based on different devices.

<linkrel= "stylesheet" type= "text/css" media= "screen and (min-width:960px)" href= "Css/gt-960px.css" >

Load style sheet GT-960PX.CSS when page width is greater than or equal to 960px

< Linkrel = "stylesheet" type = "Text/css" Media = "screen and (min-width:600px) and (max-width:960px)" href = "Css/gt-600px-lt-960px.css" >

When the page width is greater than or equal to 600px and less than or equal to 960px, load the style sheet gt-600px-lt-960px.css

< Linkrel = "stylesheet" type = "Text/css" Media = "screen and (max-width:600px)" href = "Css/lt-600px.css" >

Load style sheet LT-600PX.CSS when page width is less than or equal to 600px

2. Inline method in style sheet

When the page width is greater than or equal to 960px

@media Screenand (min-width:960px) {    . Header,    . Container,    . footer{        width:960px;    }                  . Sidebarleft,    . Main,    . sidebarright{        float:left;         Height:400px;    }     ...}

When the page width is greater than or equal to 600px and less than or equal to 960px

@media Screenand (min-width:600px) and (max-width:960px) {    . Header,    . Container,    . footer{        width:600px;    }                   . Sidebarleft,    . Main{        float:left;         Height:400px;    }     ...}

When the page width is less than or equal to 600px

　

@media Screenand (max-width:600px) {    . Header,    . Container,    . footer{        width:400px;    }                  . Sidebarleft,    . sidebarright{        width:400px;         Height:100px;    }     ...}

Elastic picture

We need to set max-width:100% and Height:auto for the images to make them elastic.

{    max-width: 100%;     height: auto;     width: auto9/** */}

div CSS Self-adapting