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 */

}