導航

立即咨詢:400-090-1128添加微信
News
網站設計
響應式網頁設計的幾種布局形式
作者:時間:2019/11/1 16:02:11閱讀:

随着移動互聯網的發展和微信的突起,移動端的響應式布局越來越重要了。目前網站布局有以下幾種:



1.定寬度布局
很多pc的網站都是定寬度布局的,也就是設置了min-width,
這樣一來,如果小于這個寬度就會出現滾動條,
如果大于這個寬度則内容居中外加背景,
這種設計常見與pc端。

2.響應式布局
所謂響應式布局就是流式布局+媒體查詢,
流式布局用來解決不同寬度的布局問題,
外加媒體查詢,可以調整布局,例如大屏幕是布局1,小屏幕是布局2,
這種布局通吃pc和移動端,做到精細處,兩者的效果都很好,
缺點是媒體查詢是有限的,也就是可以枚舉出來的,
隻能适應主流的寬高。

3.rem布局
原理是,先按定高寬設計出來頁面,然後轉換為rem單位,
配合js查詢屏幕大小來改變html的font-size,
終做出所謂的自适應。

響應式 VS rem

1.響應式
優點:适應pc和移動端,如果足夠耐心,效果
缺點:要匹配足夠多的屏幕大小,工作量不小,設計也需要多個版本

2.rem+js
優點:理想狀态是所有屏幕的高寬比和初的設計高寬比一樣,或者相差不多,适應。
缺點:碰到重視高度的設計,或者重視元素間間距的設計,那就玩不開了。

總結

1.如果隻做pc端
那麼定寬度是好的選擇
2.如果做移動端,且設計對高度要求不高
那麼rem+js是好的選擇,一份css+一份js調節font-size搞定
3.如果pc,移動要兼容,而且要求很高
那麼響應式布局還是好的選擇,前提是設計根據不同的高寬做不同的設計,



立即咨詢我們吧
全年免費維護,終身技術支持!
13812009346 QQ 在線留言