div css 自適應

標籤：ini   href   css3   特性   螢幕   問題   head   bar   float   

 

怎樣實現響應式布局？

對於這個問題，我們可以通過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 */}

 

div css 自適應