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

}