固定寬度和自適應(yīng)的網(wǎng)頁(yè)布局設(shè)計(jì)，各有哪些優(yōu)劣？

時(shí)間：2024-02-17 19:05:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-02-17 19:05:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

固定寬度和自適應(yīng)的網(wǎng)頁(yè)布局設(shè)計(jì)，各有哪些優(yōu)劣？：?jiǎn)栴}的提法并不恰當(dāng) 我解釋后會(huì)修改問(wèn)題

固定寬度 vs 自適應(yīng) 不等價(jià)于 窄屏 vs 寬屏

- 固定寬度的設(shè)計(jì)可寬可窄 可以是 770, 913, 1000, 1116 或任意像素值

- 自適應(yīng)的設(shè)計(jì)當(dāng)用戶使用小屏幕或小瀏覽器窗口時(shí) 寬度也會(huì)自動(dòng)縮小到 960 乃至 600 像素以下

- 介于完全固定與完全自適應(yīng)之間 自適應(yīng)同時(shí)有最小/大寬度的設(shè)計(jì)也很常見(jiàn)

- 自適應(yīng)有種特殊情況 一般稱為 responsive design 則是對(duì)不同寬度分別做優(yōu)化 動(dòng)態(tài)調(diào)整頁(yè)面設(shè)計(jì) 窗口寬度為 240, 480, 800, 1024, 1440 時(shí)會(huì)顯示不同的布局

現(xiàn)在更多人只把最后一種自適應(yīng)稱作自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) (或響應(yīng)式設(shè)計(jì)) 簡(jiǎn)單的可變寬度通常成為流動(dòng)式設(shè)計(jì) (fluid web design) 或流動(dòng)布局 (fluid layout)

自適應(yīng)設(shè)計(jì)出現(xiàn)前 做網(wǎng)頁(yè)通常要面臨定寬和流動(dòng)的選擇

完全固定大小的設(shè)計(jì)體驗(yàn)上會(huì)差一些 但是更加可控 更容易開(kāi)發(fā)改進(jìn)

可變大小體驗(yàn)會(huì)好一些但不是絕對(duì)的

即使是流動(dòng)布局頁(yè)面上真正可變寬的東西實(shí)際上不多——圖片、側(cè)欄、按鈕等元素通常都是固定大小的 可變寬的就只剩下文字 然而注重用戶閱讀體驗(yàn)的產(chǎn)品 也不會(huì)允許文字寬度過(guò)于隨意的變化 這也是為什么文字較多的頁(yè)面一般不會(huì)采用流動(dòng)布局

完全流動(dòng)的設(shè)計(jì)很難找到 因?yàn)槿绻辉O(shè)定最小寬度 當(dāng)窗口太小時(shí)頁(yè)面會(huì)變得完全不可讀 如果不設(shè)定最大寬度 大屏上一段文字拉長(zhǎng)到幾千像素也無(wú)法閱讀

移動(dòng)設(shè)備的出現(xiàn)是對(duì)傳統(tǒng)定寬和流動(dòng)布局的主要挑戰(zhàn) 這時(shí)自適應(yīng)的布局就非常有必要了

可以參加 Heroku 的狀態(tài)頁(yè)面 https://status.heroku.com/ 請(qǐng)自己試試調(diào)整窗口大小來(lái)看效果

自適應(yīng)的布局未來(lái)會(huì)成為潮流 這種設(shè)計(jì)同時(shí)滿足了

1. 根據(jù)用戶窗口大小的不同做出改變
2. 在一定寬度范圍內(nèi)提供穩(wěn)定的視覺(jué)體驗(yàn)

缺點(diǎn)則有 對(duì)老舊和非標(biāo)準(zhǔn)瀏覽器的兼容性較差 對(duì)產(chǎn)品定義和設(shè)計(jì)能力的要求較高 對(duì)頁(yè)面做出調(diào)整時(shí) 需要同時(shí)改變多種尺寸下的布局

還有另外一個(gè)現(xiàn)象 很多沒(méi)有采用自適應(yīng)布局的網(wǎng)頁(yè) 都對(duì)不同元素指定了不同的策略——導(dǎo)航欄是變寬的(google) 正文是定寬的 側(cè)邊欄只在寬屏情況下展開(kāi)(facebook) 用背景圖片填充寬屏用戶頁(yè)面邊緣的空白(百度貼吧) 這些都可以算做是簡(jiǎn)化版的自適應(yīng)布局