發布時間:2022-04-25 09:45:17來源:魔方格
Web前端開發就是創建Web頁面,或者APP等前端界面呈現給用戶的過程,通過HTML、CSS及JavaScript等衍生出來的各種技術、框架、解決方案,來實現互聯網產品的用戶界面交互。
web前端怎么布局網頁?
Web前端的布局類型有這些:靜態布局、流式布局、自適應布局、響應式布局;其如果只做電腦端,建議選擇靜態布局;如果做移動端,且設計對高度和元素間距要求不高,建議選擇彈性布局。
1.靜態布局:
不管瀏覽器尺寸具體是多少,網頁布局始終按照初寫代碼時的布局來顯示。常規的pc的網站都是靜態(定寬度)布局的,也就是設置了min-width,這樣的話,如果小于這個寬度就會出現滾動條,如果大于這個寬度則內容居中外加背景,這種設計常見于pc端。
2.流式布局:
布局特點是屏幕分辨率變化時,頁面里元素的大小會變化而但布局不變。
3.自適應布局:
自適應布局的特點是分別為不同的屏幕分辨率定義布局,即創建多個靜態布局,每個靜態布局對應一個屏幕分辨率范圍。
4.響應式布局:
布局特點是每個屏幕分辨率下面會有一個布局樣式,即元素位置和大小都會變。
那么我們如何布局呢?通過以下幾點來選擇布局。
1.如果只做電腦端,好的選擇是靜態布局。
2.如果做移動端,且設計對高度和元素間距要求不高,那么彈性布局(rem+js)是好的選擇,通過一份css+一份js調節font-size就搞定。
3.如果電腦端,移動端要兼容,而且要求很高,那么響應式布局還是好的選擇。前提是設計根據不同的高寬做不同的設計,響應式根據媒體查詢做不同的布局。