div css 自适应

 

怎样实现响应式布局？

对于这个问题，我们可以通过CSS3中的Media Query来实现，即媒介查询。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于"。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

首先我们要允许网页宽度自动调整

在网页代码的头部，加入一行viewport元标签：

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

　下面通过Media Query我们可以得到不同设备屏幕的宽和高，从而我们就可以分别处理了。根据不同的设备屏幕宽度，设置不同的CSS。那么这里有两种方法：

1、外联样式表

在这里我们可以根据不同的设备载入不同的CSS样式表 

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

　　当页面宽度大于等于960px时，载入样式表gt-960px.css 

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

当页面宽度大于等于600px且小于等于960px时，载入样式表gt-600px-lt-960px.css 

<linkrel="stylesheet"type="text/css"media="screen and (max-width:600px)"href="css/lt-600px.css">

当页面宽度小于等于600px时，载入样式表lt-600px.css

2、样式表中内嵌法

当页面宽度大于等于960px时

@media screenand (min-width:960px){

    .header,

    .container,

    .footer{

        width:960px;

    }

             

    .sidebarLeft,

    .main,

    .sidebarRight{

        float:left;

        height:400px;

    }

    ...

}

当页面宽度大于等于600px且小于等于960px时

@media screenand (min-width:600px) and (max-width:960px){

    .header,

    .container,

    .footer{

        width:600px;

    }

              

    .sidebarLeft,

    .main{

        float:left;

        height:400px;

    }

    ...

}

当页面宽度小于等于600px时

　

@media screenand (max-width:600px){

    .header,

    .container,

    .footer{

        width:400px;

    }

             

    .sidebarLeft,

    .sidebarRight{

        width:400px;

        height:100px;

    }

    ...

}

弹性图片

我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。

img {

    max-width: 100%;

    height: auto;

    width: auto9; /* ie8 */

}