移動端頁面總結

2021-09-27 07:22:39 字數 861 閱讀 7952

關於前端移動端頁面開發的總結

從兩種情況來看:

一、單頁面(落地頁之類的)

1.一般都是分為幾個大的模組,可以延續之前的做法,每個模組都用乙個語義化的id表示出來,更加便於維護;

2.可以像之前一樣搭好乙個大的框架,在框架裡面填內容就可以了;

3.對於字型、顏色等盡量從藍湖中取得,如果沒有那麼最好在寫頁面之前先統一全頁面字型大小、背景顏色等;

4.關於壓縮的問題,之前都有過幾次這種情況的出現,目前正在尋找更好的方法。

現在的做法是根據螢幕大小(750px為基準),將甲方所給的按比例進行縮放,如果在適應性問題**現了壓縮,採用**查詢的方式修正;

5.關於頁面規範的問題:正常情況下html**中不要太多css樣式,在寫單頁面中為了快速完成我們一般習慣寫行內樣式,

這種在後期最好是單獨列入style標籤中或者是乙個單獨的css檔案,會使得整體**更加整潔,結構更加清晰,

還有一種情況是每乙個板塊下單獨寫了乙個style標籤放樣式,這種最好是寫在head標籤裡的乙個總的style標籤中,更有利於頁面整潔和後期維護;

在這裡我們將所有的px換算成rem來表示,對於自適應情況更加友好,同樣,這種情況下壓縮變形問題基本上不會出現;

2.多頁面一般會分為幾個大的板塊,我們在對html、css、js命名的時候就可以將其劃分開,團隊開發和維護會更加便捷;

3.乙個頁面一般分為頭部、主體部分和底部三大模組,在入手的時候可以先把復用性高的頭部和底部模組寫好,在寫其他頁面時直接引入修改部分內容就可以了;

主體部分和單頁面一樣,可根據情況先構建好主體框架,再填內容;

4.多頁面中要用到的框架我們採用的是vant框架,很多元件都可以直接拿過來用,再根據設計圖改變一些樣式就可以了,這樣可以節省很多時間;

移動端頁面布局

上下兩條固定到上邊和下邊,中間的內容區域佔據剩餘的空間 all html,body,container 第一種方法 1 header高度固定畫素,footer固定畫素。section高度calc 100 header高度 footer高度 2 header,footer設定絕對定位的方式 absol...

移動端頁面布局

關於移動端頁面的總結,最近接觸移動端頁面,簡單的介紹幾種頁面布局吧,以後繼續補充。1 移動端頁面需要在頭部新增 2 移動頁面的布局方式 1 橫向百分比,縱向畫素值 可以採用百分比 相對度量單位 進行盒模型橫向屬性 width 左右內邊距 左右外邊距 的製作,使用em 相對度量單位 實現文字的處理。但...

移動端 移動端頁面適配方案

這是mdn上的解釋 這個單位代表根元素的 font size 大小 例如 元素的font size 當用在根元素的font size上面時 它代表了它的初始值 也就是說,rem單位取值的大小和根元素html的font size取值直接相關。它跟html元素之間得關係為 html的fontsize值 ...