靜態布局(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.能夠方便的解決多裝置...