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。那么这里有两种方法：

一、外联样式表

在这里咱们能够根据不一样的设备载入不一样的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

二、样式表中内嵌法

当页面宽度大于等于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 */

}