移動端頁面布局

2022-08-05 08:12:10 字數 1293 閱讀 7210

關於移動端頁面的總結,最近接觸移動端頁面,簡單的介紹幾種頁面布局吧,以後繼續補充。

1、移動端頁面需要在頭部新增

2、移動頁面的布局方式

(1)橫向百分比,縱向畫素值

可以採用百分比(相對度量單位)進行盒模型橫向屬性(width、左右內邊距、左右外邊距)的製作,使用em(相對度量單位)實現文字的處理。但盒模型縱向上還是使用固定畫素作為單位。

但是,這樣做可能會導致變形,畫素變化時,頁面模組的寬高比例會變形,對於來說,也有可能導致變形,設定橫向百分比,縱向會自動等比例縮放,如果父級元素高度固定,裡面的img就會出現變形(壓縮或者拉伸)的問題。

(2)響應式布局

我們可以使用一些流行起來的框架進行響應式布局,有bootstrap框架等;我們也可以使用css3屬性,@media screen,通過**查詢,對不同的手機畫素各寫一套**,這種方式後期維護起來很麻煩。

(3)使用em或rem單位設定元素的寬高度

現在最流行的是使用rem單位進行開發,rem是依賴於根元素計算的單位。

這個必須新增乙個樣式

html(font-size:百分比;)

百分比的設定使用rem更方便,例如html 那麼1rem就等於10px,百分比的設定給自己提供了方便。

這個會出現乙個問題,假如說margin設定了1rem,螢幕變化時,margin的距離不會變化,空隙看起來會變大或變小,與周圍元素的比例就會不對稱,可能會跟設計圖之間有出入。

(4)響應式的使用rem單位

使用一段js動態的設定html的font-size屬性。

在專案css中(注意不要被公共的base、common之類的影響了,資源載入順序也是蠻重要的),先把html的fontsize設定為 100px(或者加上**查詢**), 避免載入未完成時候樣式錯亂;

此時1rem=100px

css:

html

js:

(function

($, window)

setfontsize();

window.addeventlistener(shuping,

function

() ,

false

); },

false

); })($, window);

參考:

移動端頁面布局

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

移動端開發頁面布局 3

1 響應式布局定義 頁面布局會隨著螢幕大小變化而發生不同的響應,稱為響應式布局。1 不需要單獨寫移動端頁面 2 根據不同裝置發生變化 2 原理 通過 查詢針對不同寬度的裝置進行布局和樣式的設定,從而適配不同裝置 分四個檔位 手機 768px 平板 768px 992px 桌面顯示器 992px 12...

移動端頁面適配,rem布局

移動端頁面適配 em 根據元素自身的字型大小來計算自己的尺寸 rem root em 根據根節點 html 的字型大小來計算自己的尺寸 適配 各個移動裝置,解析度大小不一致,使我們的頁面在各種解析度下都顯示完好 等比的縮放 根據螢幕的解析度 動態的設定html的字型大小,來達到頁面等比縮放的功能 注...