如今響應(yīng)式設(shè)計(jì)如此流行，那么如何才能做好一個(gè)響應(yīng)式網(wǎng)站呢？

時(shí)間：2023-12-11 06:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-12-11 06:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如今響應(yīng)式設(shè)計(jì)如此流行，那么如何才能做好一個(gè)響應(yīng)式網(wǎng)站呢？：

以下，是我的親身實(shí)踐總結(jié)出來(lái)的，簡(jiǎn)潔易懂。只要你懂一點(diǎn)基礎(chǔ)的HTML+CSS知識(shí)，你就能學(xué)會(huì)響應(yīng)式設(shè)計(jì)。同時(shí)，內(nèi)含響應(yīng)式布局的關(guān)鍵代碼分享，可供大家收藏借鑒。不足之處，還望海涵。因?yàn)槲也皇锹殬I(yè)前端工程師，純屬興趣愛(ài)好分享。

做響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，只要你理解了網(wǎng)頁(yè)為什么會(huì)【響應(yīng)】、根據(jù)什么來(lái)【響應(yīng)】的底層邏輯，這一切都豁然開(kāi)朗了。然后要做好一個(gè)響應(yīng)式網(wǎng)站，一是需要你有良好的排版與審美，再者就是得有耐心去慢慢調(diào)試。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的基本原理

首先，我們知道一個(gè)網(wǎng)頁(yè)其實(shí)就是一個(gè)HTML（超文本標(biāo)記語(yǔ)言）文檔，HTML文檔標(biāo)記了網(wǎng)頁(yè)中的圖片、文字、超級(jí)鏈接、表單....等元素，而CSS（層疊樣式）也是一種計(jì)算機(jī)標(biāo)記語(yǔ)言，通過(guò)CSS標(biāo)記語(yǔ)言，我們可以標(biāo)記HTML文檔中的圖片、文字、超級(jí)鏈接、表單...等元素以何種外觀樣式呈現(xiàn)。

比如我可以通過(guò)CSS設(shè)置圖片在HTML文檔流中，是否呈現(xiàn)出圓角、是否加邊框、是否為灰色、或模糊的樣式。同時(shí)我們的CSS，還可以通過(guò)其自帶的媒體查詢屬性來(lái)【判斷】顯示窗口的寬度，然后針對(duì)不同的窗口寬度，來(lái)設(shè)置HTML元素的CSS外觀樣式。

比如在同一個(gè)HTML文檔中的同一行文字，當(dāng)在大尺寸的電腦屏幕上顯示時(shí)，我們可以給他設(shè)置更大的字號(hào)，也不至于內(nèi)容溢出；而在小屏幕手機(jī)上時(shí)，可以設(shè)置更小的字號(hào)，賦予其更加整潔的版面效果。如此一番操作下來(lái)，這個(gè)網(wǎng)頁(yè)就是響應(yīng)式的了。

其中，CSS的這個(gè)媒體查詢標(biāo)記，就是響應(yīng)式設(shè)計(jì)的最關(guān)鍵的代碼。寫作：

@media (判斷條件) { /*當(dāng)滿足判斷條件成立時(shí)，就執(zhí)行這里面寫的CSS樣式。*/} 例如，當(dāng)顯示窗口的寬度大于1300像素時(shí)，網(wǎng)頁(yè)中的圖片<img>就變?yōu)榛疑?，其CSS樣式就可以寫作：

@media (min-width: 1300px) { img{ filter: grayscale(100%); }} 瀏覽器效果：

如圖所示：瀏覽器寬度拖到1200px~1300px之間時(shí)，圖片就顯示為彩色，圖片大于1300px時(shí)，圖片就顯示為灰色。所以，什么是響應(yīng)式？這這這這這就是。

好，現(xiàn)在我們明白了響應(yīng)式的基本原理，接下來(lái)，我們?cè)偻鎮(zhèn)€花樣。

我們讓圖片圓角，隨著瀏覽器窗口寬度不斷縮小，圖片的圓角就逐漸變大。

那么其CSS樣式，我們可以這樣依次遞進(jìn)寫下來(lái)：

@media (min-width: 1100px) and (max-width:1200px){ img{ border-radius: 20px; }}@media (min-width: 1000px) and (max-width:1100px){ img{ border-radius: 40px; }}@media (min-width: 900px) and (max-width:1000px){ img{ border-radius: 60px; }}@media (min-width: 800px) and (max-width:900px){ img{ border-radius: 80px; }}@media (min-width: 700px) and (max-width:800px){ img{ border-radius: 100px; }}@media (min-width: 600px) and (max-width:700px){ img{ border-radius: 120px; }}@media (min-width: 500px) and (max-width:600px){ img{ border-radius: 140px; }}瀏覽器效果：

小結(jié)

通過(guò)上面的案例，我們可以看到：做響應(yīng)式網(wǎng)頁(yè)，其實(shí)最主要的就是要學(xué)會(huì)靈活運(yùn)用CSS3的@media媒體查詢，設(shè)置好屏幕寬度（或者叫窗口寬度）的分界點(diǎn)，然后根具不同的媒體屏幕寬度，單獨(dú)設(shè)置樣式，精心調(diào)教，即可做出一個(gè)體驗(yàn)完善的響應(yīng)式網(wǎng)站。

---

再來(lái)個(gè)網(wǎng)站實(shí)例（www.ui100.top）

比如我之前做的這個(gè)【全鏈路UI設(shè)計(jì)網(wǎng)】，就采用了響應(yīng)式布局，網(wǎng)頁(yè)完全兼容大尺寸的PC、iPad pro、iPad、最新的iPhone，以及更早的iPhone SE，總之就是根據(jù)網(wǎng)頁(yè)可能出現(xiàn)在的設(shè)備中，我都單獨(dú)做了CSS樣式微調(diào)，以確保用戶都能看到一個(gè)體驗(yàn)完整的網(wǎng)頁(yè)，雖然我的前端技術(shù)很一般，但是我能想得到的點(diǎn)，我一定會(huì)把它做得最好。

PC端 尺寸

這個(gè)網(wǎng)站首頁(yè)，在電腦PC端呈現(xiàn)的是下圖樣式：

△此時(shí)導(dǎo)航欄處的logo、slogan、目錄、報(bào)名咨詢按鈕得到完全展示，符合鼠標(biāo)精準(zhǔn)點(diǎn)擊的交互習(xí)慣。這種樣式的呈現(xiàn)，是基于【屏幕寬度＞1300像素】來(lái)設(shè)置的，導(dǎo)航欄<header>標(biāo)簽下的.container容器寬度，以及其他DIV布局下的.container容器寬度都被被限制在1206px。

這就是針對(duì)PC端實(shí)現(xiàn)響應(yīng)式布局的關(guān)鍵CSS樣式：

/* PC端的單獨(dú)樣式，寫在里面就可以了*/@media (min-width: 1300px){ .container { width: 1206px; }}

iPad Pro尺寸

然后，當(dāng)屏幕寬度縮小，就過(guò)渡到了iPad pro的尺寸時(shí)，由于ipad pro本身尺寸也不小，所以網(wǎng)頁(yè)整體布局并沒(méi)有太大變化，只是在此種情況下【992像素 < 屏幕寬度 < 1299像素】，我將主標(biāo)題的字號(hào)減小了，同時(shí)視頻右側(cè)的課程目錄列表相對(duì)于PC版省略了【課時(shí)】?jī)蓚€(gè)漢字，讓整個(gè)版面顯得不那么擁擠。這同樣只需用HTML+CSS配合，即可實(shí)現(xiàn)，得到如圖：

同樣的，此時(shí)DIV布局下的.container容器寬度都被被限制在1206px。這就是針對(duì)iPad端實(shí)現(xiàn)響應(yīng)式布局的關(guān)鍵CSS樣式：

/* iPad pro端的單獨(dú)樣式，寫這里面就可以了*/@media (max-width: 1299px) and (min-width: 992px){ .container { width: 970px; }}

iPad尺寸

當(dāng)屏幕寬度縮小到到 768px~991px時(shí)，就讓網(wǎng)頁(yè)的寬度匹配ipad豎屏的屏幕寬度，此時(shí)網(wǎng)頁(yè)會(huì)呈現(xiàn)出下面這樣的樣式：

△注意看，此時(shí)的導(dǎo)航欄右側(cè)的目錄，已經(jīng)被隱藏起來(lái)了，點(diǎn)擊右上角按鈕可展開(kāi)菜單。與此同時(shí)，頁(yè)面字號(hào)變得更小了，立即報(bào)名、報(bào)名咨詢按鈕，則出現(xiàn)在了屏幕底部，符合ipad手指點(diǎn)擊交互的規(guī)律。還有就是課程目錄，從之前的【視頻右側(cè)】變換到了【視頻下側(cè)】列表橫向排列。

此時(shí)的HTML文檔，依然是之前那個(gè)文檔，只是針對(duì)當(dāng)前的屏幕尺寸狀態(tài)，單獨(dú)設(shè)置了其CSS樣式，就可以達(dá)到如此適應(yīng)iPad設(shè)備的效果，所以，什么是響應(yīng)式？這這這這這就是。

這就是針對(duì)iPad端實(shí)現(xiàn)響應(yīng)式布局的關(guān)鍵CSS樣式：

/* iPad端的單獨(dú)樣式，寫這里面就可以了*/@media (max-width: 991px) and (min-width: 768px){ .container { width: 970px; }}

iPhone尺寸

然后，同樣的套路設(shè)置手機(jī)屏幕的媒體查詢分界點(diǎn)。當(dāng)屏幕小于ipad寬度尺寸，就可以讓網(wǎng)頁(yè)的寬度去匹配手機(jī)的展示特性了。

/* iphone以及手機(jī)端的單獨(dú)樣式，寫這里面就可以了*/@media ( max-width: 767px){ .container { width: 95%; }}...

如此往復(fù)，直到通過(guò)media媒體查詢，設(shè)置完最小設(shè)備iPhone SE的單獨(dú)樣式，這個(gè)網(wǎng)頁(yè)基本上就做到了全面兼容了。期間，需要注意要分離共用CSS樣式，以減少重復(fù)代碼，提升網(wǎng)頁(yè)性能。

特殊情況的響應(yīng)式

如遇個(gè)別特殊情況，可以配合JavaScript來(lái)處理響應(yīng)式，我的原則是：CSS3能解決的，盡量不用JS。比如在這個(gè)網(wǎng)頁(yè)中，詳情頁(yè)的配圖，有兩套，一套是適應(yīng)大屏幕（PC+iPad pro），如圖：

一套是適應(yīng)移動(dòng)小屏幕（iPad + iPhone、以及更小設(shè)備），如圖：

如果說(shuō)，只是單純的通過(guò)CSS的@media查詢來(lái)判斷屏幕寬度，然后用CSS的【display:none】或【display:block】去響應(yīng)不同狀態(tài)下詳情圖的隱藏或顯示，那么這兩套圖在頁(yè)面被訪問(wèn)時(shí)，都會(huì)同時(shí)加載，這必然會(huì)耗費(fèi)更多服務(wù)器資源，影響網(wǎng)頁(yè)打開(kāi)速度。

而用戶單次訪問(wèn)網(wǎng)頁(yè)的設(shè)備尺寸通常都是固定的，沒(méi)有誰(shuí)會(huì)像我一樣，拖著窗口變來(lái)變?nèi)?，所以，基于此種情況下，我只需要反饋用戶當(dāng)下設(shè)備、當(dāng)下窗口尺寸所需要的詳情圖即可了，而不必兩套圖都給他。所以，在這個(gè)網(wǎng)頁(yè)單頁(yè)中，我就要結(jié)合了JS，來(lái)刪除用戶不需要的詳情圖節(jié)點(diǎn)，響應(yīng)不同設(shè)備的樣式需求，同時(shí)亦能提升網(wǎng)頁(yè)性能。

這種單頁(yè)HMTL文檔中，我覺(jué)得這應(yīng)該是最直觀的處理方式了吧。當(dāng)然了，在我認(rèn)知之外，也許還有更好的技術(shù)處理方式，但在我的前端技術(shù)真的很一般，能分享的就這么多了。

更多Demo

我曾用類似的@media媒體查詢的響應(yīng)式布局思路，還曾編寫過(guò)的這些網(wǎng)頁(yè)，大家可以前往查看體驗(yàn)。

綜上所述

要做好一個(gè)響應(yīng)式網(wǎng)站，一是需要深入理解HMTL+CSS的基礎(chǔ)知識(shí)，掌握@media屬性的書(shū)寫樣式，同時(shí)要具備一定的JavaScript編程知識(shí)用作處理一些特殊情況，再者要耐得住性子，去針對(duì)不同尺寸的設(shè)備慢慢調(diào)試，如此以來(lái)，就能做出一個(gè)高質(zhì)量的響應(yīng)式網(wǎng)站。

讓你的一套代碼，適應(yīng)所有設(shè)備，這感覺(jué)倍爽。最后，再放幾張圖，展示一下我從視覺(jué)設(shè)計(jì)到響應(yīng)式代碼的調(diào)教成果：

望以上，對(duì)大家有所幫助。

---

關(guān)于我（ @酷coo豆 ）

我是靠自學(xué)平面設(shè)計(jì)、UI設(shè)計(jì)、網(wǎng)頁(yè)前端進(jìn)入互聯(lián)網(wǎng)行業(yè)的個(gè)人站長(zhǎng)。我在本站，熱衷于傳播平面設(shè)計(jì)、互聯(lián)網(wǎng)IT的基礎(chǔ)知識(shí)，樂(lè)于分享自學(xué)設(shè)計(jì)的相關(guān)經(jīng)驗(yàn)、書(shū)籍、教程，我相信只要能找到優(yōu)質(zhì)的自學(xué)教程，人人都可以成為理想中的自己。

平面設(shè)計(jì)教程推薦：http://ps.xxriji.cn/zixue.html

web前端基礎(chǔ)教程推薦：http://www.xxriji.cn/wap/webdeveloper.html

（完）