響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)追求的是根據(jù)用戶設(shè)備的不同、備朝向的不同，以及設(shè)備屏幕大小的不同，提供不同的網(wǎng)頁(yè)設(shè)計(jì)，以達(dá)到都美觀的效果。
為了解決手機(jī)瀏覽網(wǎng)頁(yè)的問題，許多網(wǎng)站都提供了單獨(dú)的手機(jī)版本。比如，在手機(jī)瀏覽器地址欄輸入：www.sohuc.om，打開搜狐的主頁(yè)后，再去看瀏覽器地址欄，上面的網(wǎng)址實(shí)際上是：http://m.sohu.com；同樣的，用手機(jī)瀏覽器訪問淘寶的主頁(yè)，實(shí)際訪問的網(wǎng)址會(huì)是：https://m.taobao.com。
這種解決方案下，需要用到設(shè)備檢測(cè)技術(shù)，最簡(jiǎn)單的實(shí)現(xiàn)方式就是應(yīng)用名為deviceJS的JavaScript庫(kù)（http://www.devicejs.org）。deviceJSDevice.js 是一個(gè)可以檢測(cè)設(shè)備、設(shè)備方向和操作系統(tǒng)和方向等。deviceJS的簡(jiǎn)單的示例：
<script type="text/javascript" src="device.min.js"></script>
<script type="text/javascript">
if (device.mobile()) {
window.location = "http://m.sohu.com";
}
</script> |
開發(fā)可以使用Chrome瀏覽器的設(shè)備模擬功能，來實(shí)現(xiàn)移動(dòng)設(shè)備的測(cè)試。打開Chrome瀏覽器之后，按F12，進(jìn)入“開發(fā)者工具”界面。單擊開發(fā)者工具欄右上角的“Toggle Device Model”按鈕，就會(huì)打開設(shè)備模式。
這時(shí)在瀏覽器地址欄輸入：www.sohu.com回車，就會(huì)看到搜狐移動(dòng)版的頁(yè)面，而瀏覽器地址欄會(huì)變?yōu)椋簃.sohu.com。
網(wǎng)站的移動(dòng)版僅僅解決了手機(jī)瀏覽網(wǎng)頁(yè)的問題，遠(yuǎn)遠(yuǎn)不能適應(yīng)眾多上網(wǎng)設(shè)備屏幕寬度的差異，于是流式布局技術(shù)應(yīng)運(yùn)而生。有關(guān)流式布局網(wǎng)站的示例，可以訪問：http://mediaqueri.es，上面收錄了各種風(fēng)格的使用流式布局設(shè)計(jì)的網(wǎng)頁(yè)。
流式布局的本質(zhì)，就是在不同屏幕寬度下應(yīng)用不同的CSS樣式，以適應(yīng)設(shè)備寬度或者瀏覽器寬度的改變。要做到這一點(diǎn)，有兩個(gè)關(guān)鍵的技術(shù)，一是HTML標(biāo)記的寬度和高度要使用相對(duì)值，二是對(duì)窗口寬度改變做出判斷并更換樣式表。
先來說第一點(diǎn)，網(wǎng)頁(yè)中的HTML標(biāo)記的寬度和高度，必須使用相對(duì)值（百分比），而不能是絕對(duì)值。下面是一個(gè)簡(jiǎn)單的示例網(wǎng)頁(yè)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流式布局 - 相對(duì)寬度和高度值</title>
<style type="text/css">
html, body {
height: 100%;
}
div {
width: 90%;
height: 45%;
background: blue;
margin: 0 auto;
}
p.class1 {
width: 60%;
height: 70%;
background: yellow;
padding-left: 10%;
float: left;
}
p.class2 {
width: 20%;
padding: 0 5%;
height: 30%;
background: red;
float: left;
}
</style>
</head>
<body>
<div>
<p class="class1">文字內(nèi)容</p>
<p class="class2">文字內(nèi)容</p>
</div>
</body>
</html> |
可以觀察瀏覽器在全屏狀態(tài)下頁(yè)面的顯示效果，然后調(diào)整瀏覽器窗口寬度后，觀察頁(yè)面的顯示效果。
流式布局的另外一項(xiàng)關(guān)鍵的技術(shù)就是對(duì)窗口寬度改變做出判斷并更換樣式表。聽起來挺難，實(shí)際上很容易，就是使用CSS3的媒體查詢，看下面的代碼片段：
<link rel="stylesheet" href="css/1.css" type="text/css"
media="(min-width:800px)">
<link rel="stylesheet" href="css/2.css" type="text/css"
media="(max-width:799px) and (min-width:600px)">
<link rel="stylesheet" href="css/3.css" type="text/css"
media="(max-width:599px)"> |
這段代碼的意思是說：當(dāng)屏幕寬度大于等于800時(shí)，應(yīng)用樣式表1.css；當(dāng)屏幕寬度小于等于799和大于等于600時(shí)，應(yīng)用樣式表2.css；當(dāng)屏幕寬度小于等于599時(shí)應(yīng)用樣式表3.css。 ----------------------------------
把人做到寬容，把技術(shù)做到強(qiáng)悍。