 |
| 昵稱(chēng)：奈薇建站網(wǎng) |
| 論壇積分：108000 |
| 發(fā)貼等級(jí)：21 |
    
    |
| 發(fā)貼數(shù)：1156 |
| 回貼數(shù)：1282 |
被砸雞蛋： 1 |
獲贈(zèng)鮮花： 182 |
|
 |
|
|
發(fā)表時(shí)間：2014/12/15 15:26:00 |
樓 主 |
|
 |
|
 |
|
用3個(gè)步驟實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)????第一步：Meta標(biāo)簽（查看演示）大多數(shù)移動(dòng)瀏覽器將HTML頁(yè)面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標(biāo)簽來(lái)進(jìn)行重置。下面的視圖標(biāo)簽告訴瀏覽器，使用設(shè)備的寬度作為視圖寬度并禁止初始的縮放。在<head>標(biāo)簽里加入這個(gè)meta標(biāo)簽。[html]?viewplaincopy?<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">??IE8或者更早的瀏覽器并不支持MediaQuery。你可以使用media-queries.yuhou.js來(lái)為IE添加MediaQuery支持。[html]?viewplaincopy?<!--[if?lt?IE?9]>??????<script?src="http://css3-mediaqueries-js.yuhou.js"></script>??<![endif]-->???????第二步：HTML結(jié)構(gòu)?????在這個(gè)例子里，我有一個(gè)包括頭部、內(nèi)容、側(cè)邊欄和頁(yè)腳的基本頁(yè)面布局。頭部有固定的高度180像素，內(nèi)容容器是600像素而側(cè)邊欄是300像素。??????第三步：媒介查詢(xún)-MediaQueries?????CSS3MediaQuery-媒介查詢(xún)是響應(yīng)式設(shè)計(jì)的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁(yè)面。?????當(dāng)視圖寬度為小于等于980像素時(shí)，如下規(guī)則將會(huì)生效?；旧?，我會(huì)將所有的容器寬度從像素值設(shè)置為百分比以使得容器大小自適應(yīng)。??????然后為小于等于700像素的視圖指定#content和#sidebar的寬度為自適應(yīng)并且清除浮動(dòng)，使得這些容器按全寬度顯示。??????對(duì)于小于等于480像素（手機(jī)屏幕）的情況，將#header元素的高度設(shè)置為自適應(yīng)，將h1的字體大小修改為24像素并隱藏側(cè)邊欄。??????你可以根據(jù)你的喜好添加足夠多的媒介查詢(xún)。我在示例中僅僅展示了3個(gè)媒介查詢(xún)。媒介查詢(xún)的目的在于為指定的視圖寬度指定不同的CSS規(guī)則，來(lái)實(shí)現(xiàn)不同的布局。媒介查詢(xún)可以寫(xiě)在同一個(gè)或者單獨(dú)的樣式表中。 |
|
 |
 |
 |
|
奈薇建站網(wǎng)致力于，讓每個(gè)中國(guó)人、每個(gè)中國(guó)企業(yè)都擁有自己的“官方網(wǎng)站”！ |
|
|
|
|
|