怎么用Hbuilderx做網(wǎng)頁設(shè)計的響應(yīng)式？

時間：2024-02-14 06:55:01 | 來源：網(wǎng)站運營

時間：2024-02-14 06:55:01 來源：網(wǎng)站運營

怎么用Hbuilderx做網(wǎng)頁設(shè)計的響應(yīng)式？：

親身實踐總結(jié)，內(nèi)含響應(yīng)式布局的關(guān)鍵代碼分享，可供大家收藏借鑒。

做響應(yīng)式網(wǎng)頁，本質(zhì)不在于用什么軟件，而是要學(xué)會靈活運用CSS3的@media媒體查詢，設(shè)置好屏幕寬度的分界點，然后根具不同的媒體屏幕寬度，單獨設(shè)置樣式。

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

PC端 尺寸

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

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

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

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

iPad Pro尺寸

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

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

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

iPad尺寸

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

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

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

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

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

iPhone尺寸

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

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

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

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

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

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

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

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

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

更多Demo

我曾用類似的@media媒體查詢的響應(yīng)式布局思路，還曾編寫過的這些網(wǎng)頁，大家可以前往查看體驗。如需系統(tǒng)學(xué)習(xí)HTML+CSS知識，可以參考這個《html+css網(wǎng)頁前端課程》。

望以上，對大家有所幫助。

---

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

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

（完）