現(xiàn)如今，響應(yīng)式設(shè)計(jì)愈發(fā)流行。有一個(gè)重要的原因便是，現(xiàn)在用手機(jī)、用平板上網(wǎng)的人越來越多了，所以為了讓訪客有一個(gè)良好的上網(wǎng)體驗(yàn)，就會(huì)讓網(wǎng)站根據(jù)對(duì)應(yīng)的上網(wǎng)設(shè)備、對(duì)應(yīng)的窗口尺寸顯示適配的網(wǎng)頁。
實(shí)現(xiàn)響應(yīng)式的核心代碼很簡(jiǎn)單，下面就最重要的幾點(diǎn)進(jìn)行講解。
讓網(wǎng)頁根據(jù)窗口尺寸更改大小
比如很普遍的文章頁面，這個(gè)文章正文是用一個(gè)容器所包含著：
<div id="read">
正文內(nèi)容
</div>
現(xiàn)在來設(shè)計(jì)這個(gè)容器的css樣式，這里我就只設(shè)置一個(gè)寬度的屬性：
#read{
width:690px;
}
現(xiàn)在它只是一個(gè)普通的網(wǎng)頁，窗口的區(qū)域并不會(huì)隨著窗口尺寸大小的更改而更改，我們只要給它加上非常簡(jiǎn)單的代碼，就能夠?qū)崿F(xiàn)流動(dòng)式的窗口布局了：
@media screen and (max-width:690px){
#read{
width:100%;
}
}
這句代碼的意思是：當(dāng)瀏覽器窗口尺寸小于690px時(shí)，id為read的這個(gè)容器的寬度便會(huì)為100%，也就是寬度隨著瀏覽器窗口的尺寸更改而更改。
響應(yīng)式設(shè)計(jì)代碼方法二
下面這種方法代碼量比較少一點(diǎn)，在實(shí)現(xiàn)簡(jiǎn)單效果時(shí)，顯示的效果可謂是完全一樣：
<div id="read">
正文內(nèi)容
</div>
#read{
width:100%;
max-width:690px;
}
大家注意到了區(qū)別沒：
- width:100%;這句代碼就是讓容器的寬度一直保持和瀏覽器窗口一樣的大小。
- max-width:690px;這句代碼就是這個(gè)容器的最大寬度為690px，到了這個(gè)寬度之后，它的寬度便會(huì)一直保持下去，不再隨瀏覽器窗口的變大而變大。
在手機(jī)或平板上適配的前提代碼
手機(jī)瀏覽器在瀏覽網(wǎng)頁時(shí)，會(huì)默認(rèn)將整個(gè)網(wǎng)頁的寬度縮在比較小的屏幕上面，如果為PC端頁面，字體便會(huì)變得很小，用戶體驗(yàn)很差。
此時(shí)便需要通過在<head></head>標(biāo)簽內(nèi)聲明以下代碼：
<meta name="viewport" content="width=device-width">
再加上上面兩點(diǎn)實(shí)現(xiàn)響應(yīng)式的具體方法，便可實(shí)現(xiàn)在不同設(shè)備上適配的網(wǎng)頁。
此教程為基礎(chǔ)中的基礎(chǔ)，大神輕噴。
