HTMLCSS學(xué)習(xí)筆記（十八）-- 響應(yīng)式布局概念

時(shí)間：2023-09-02 23:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-02 23:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

常見(jiàn)的布局方案

固定布局：以像素作為頁(yè)面的基本單位，不管設(shè)備屏幕及瀏覽器寬度，只設(shè)計(jì)一套尺寸；
?
可切換的固定布局：同樣以像素作為頁(yè)面單位，參考主流設(shè)備尺寸，設(shè)計(jì)幾套不同寬度的布局。通過(guò)識(shí)別的屏幕尺寸或?yàn)g覽器寬度，選擇最合適的那套寬度布局；
?
彈性布局：以百分比作為頁(yè)面的基本單位，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果；
?
混合布局：同彈性布局類(lèi)似，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果；只是混合像素、和百分比兩種單位作為頁(yè)面單位。
?
布局響應(yīng)：對(duì)頁(yè)面進(jìn)行響應(yīng)式的設(shè)計(jì)實(shí)現(xiàn)，需要對(duì)相同內(nèi)容進(jìn)行不同寬度的布局設(shè)計(jì)，有兩種方式：pc優(yōu)先（從pc端開(kāi)始向下設(shè)計(jì)）；移動(dòng)優(yōu)先（從移動(dòng)端向上設(shè)計(jì)）；?無(wú)論基于那種模式的設(shè)計(jì)，要兼容所有設(shè)備，布局響應(yīng)時(shí)不可避免地需要對(duì)模塊布局做一些變化（發(fā)生布局改變的臨界點(diǎn)稱(chēng)之為斷點(diǎn)），

常見(jiàn)響應(yīng)式布局方案

• （1）模塊中內(nèi)容：擠壓－拉（布局不變）

• （2）模塊中內(nèi)容：換行－平鋪（布局不變）

• （3）模塊中內(nèi)容：刪減－增加（布局不變）

• （4）模塊位置變換（布局改變）

• （5）模塊展示方式改變：隱藏－展開(kāi)（布局改變）

• （6）模塊數(shù)量改變：刪減－增加（布局改變）

響應(yīng)式開(kāi)發(fā)的特點(diǎn)

設(shè)計(jì)特點(diǎn)：
面對(duì)不同分辨率設(shè)備靈活性強(qiáng)
能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題
缺點(diǎn)：
兼容各種設(shè)備工作量大，效率低下
代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長(zhǎng)
其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶(hù)混淆的情況