響應式布局

2022-05-01 14:36:10 字數 634 閱讀 3751

靜態布局(static layout)

即傳統web設計,網頁上的所有元素的尺寸一律使用px作為單位,這種設計常見於pc端。

流式布局(liquid layout)

自適應布局(adaptive layout)

彈性布局(rem/em布局)

響應式布局(responsive layout)

優點:適應pc和移動端,如果足夠耐心,效果完美。

缺點:(1)**查詢是有限的,也就是可以列舉出來的,只能適應主流的寬高。

(2)要匹配足夠多的螢幕大小,工作量不小,設計也需要多個版本。

布局單位的補充:

結論

1.如果只做pc端,那麼靜態布局(定寬度)是最好的選擇;

2.如果做移動端,且設計對高度和元素間距要求不高,那麼彈性布局(rem+js)是最好的選擇,乙份css+乙份js調節font-size搞定;

3.如果pc,移動要相容,而且要求很高那麼響應式布局還是最好的選擇,前提是設計根據不同的高寬做不同的設計,響應式根據**查詢做不同的布局。

響應式設計

響應式布局 響應式布局技巧

一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計,對於pc設計乙個layout,在螢幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少,網頁布局就按照當時寫 的布局來布置 對於移動裝置,單獨設計乙個布局,使用不同的網域名稱如wap...

響應式布局

裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...

響應式布局

首先,什麼是響應式布局呢?響應式布局是2010年5月提出的乙個概念,簡單地說就是乙個 能夠相容多個終端,而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的,目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...