響應式設計-VS-REM佈局
水平有限,不對之處還請指出。
【目前幾種佈局】
隨著移動網際網路的發展和微信的突起,移動端的響應式佈局越來越重要了。
目前網站佈局有以下幾種:
1.定寬度佈局
很多pc的網站都是定寬度佈局的,也就是設定了min-width,
這樣一來,如果小於這個寬度就會出現滾動條,
如果大於這個寬度則內容居中外加背景,
這種設計常見與pc端。
2.響應式佈局
所謂響應式佈局就是流式佈局+媒體查詢,
流式佈局用來解決不同寬度的佈局問題,
外加媒體查詢,可以調整佈局,例如大螢幕是佈局1,小螢幕是佈局2,
這種佈局通吃pc和移動端,做到精細處,兩者的效果都很好,
缺點是媒體查詢是有限的,也就是可以枚舉出來的,
只能適應主流的寬高。
3.rem佈局
原理是,先按定高寬設計出來頁面,然後轉換為rem單位,
配合js查詢螢幕大小來改變html的font-size,
最終做出所謂的完美自適應。
【rem缺點】
rem一出好像所有移動端自適應不採用rem都很low一樣,
來分析分析,
假設以100x100做出網頁,
那麼採用rem+js完全可以自適應所有200x200,300x300,450x450等等高寬,
問題來了,
如果用100x100設計好後,
來了100x200,100x300,100x400的手機,
那麼效果無非兩種:
1.網頁內容只侷限與網頁頂部,例如100x400的手機,網頁內容只佔用的100x100的部分,
2.有人說可以高度也js+rem,那麼效果無非是拉伸或者縮放
【不要擡槓】
有人會說了,現實中不會有100x400的手機,
我想說的是這種rem+js只不過是寬度自適應,
高度沒有做到自適應,一些對高度,或者元素見間距要求比較高的設計,
那這種佈局沒有太大的意義。
如果只是寬度自適應,那我更推薦的是響應式設計。
【響應式 vs rem】
1.響應式
改變瀏覽器寬度,你會發現“佈局”會隨之變化,不是一成不變的,
例如導航欄在大螢幕下是橫排,在小螢幕下是豎排,在超小螢幕下隱藏為選單,
也就是說如果有足夠的耐心,在每一種螢幕下都應該有合理的佈局,完美的效果。
優點:適應pc和移動端,如果足夠耐心,效果完美
缺點:要匹配足夠多的螢幕大小,工作量不小,設計也需要多個版本
附圖:
2.rem+js
改變瀏覽器寬度,你會發現,頁面所有元素的高寬都等比例縮放,
也就是大螢幕下導航是橫的,小螢幕下還是橫的只不過變小了。。
優點:理想狀態是所有螢幕的高寬比和最初的設計高寬比一樣,或者相差不多,完美適應。
缺點:碰到重視高度的設計,或者重視元素間間距的設計,那就玩不開了。
附圖:
【總結】
1.如果只做pc端
那麼定寬度是最好的選擇
2.如果做移動端,且設計對高度要求不高
那麼rem+js是最好的選擇,一份css+一份js調節font-size搞定
3.如果pc,移動要相容,而且要求很高
那麼響應式佈局還是最好的選擇,前提是設計根據不同的高寬做不同的設計,
響應式根據媒體查詢做不同的佈局。
【ps】
還有一種rem+媒體查詢,和rem+js一對比感覺有點雞肋就沒有提及。
【最完美的是】
隨著移動端的風行,最完美的是:
響應式佈局+多版本設計+足夠的耐心