移動端布局

2021-07-27 04:17:44 字數 1105 閱讀 1757

預設以寬度為640px的設計稿為基準頁面,然後通過js獲取當前顯示裝置的尺寸,對應的調整 html 標籤的font-size大小,從而實現通過以rem為單位的移動端布局適配。

(function(win,doc)

function

layoutcalc()

html.style.fontsize

= rem +

'px';}

win.addeventlistener(event,

function(),

false);

win.addeventlistener('pageshow'

,function(e)

},false);

layoutcalc();

}(window,document));

· 自定義基準頁面尺寸

通過為html標籤新增data-basewidth屬性來指定基準頁面的尺寸。

示例:

data-basewidth=

"750"

>

...

· 定義頁面內容的字型大小

對於一些符合標準的dpr值(只要是整數,例如:1,2,3)等,都會為html標籤再附加乙個data-dpr屬性,然後開發者可以通過該屬性來結合css規則,從而實現對於不同dpr情況下,對內容字型大小的調整。

示例**:

html[data-dpr=

"1"]

.dpr-text

html[data-dpr=

"2"]

.dpr-text

html[data-dpr=

"3"]

.dpr-text

class=

"dpr-text"

>測試文字

移動端布局

css畫素與裝置畫素 二者的區別在於前者是抽象的,用於瀏覽器渲染頁面,而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口,即可見視口與布局視口,二者的區別在於前者為基於移動裝置螢幕的實際寬度,而後者為...

移動端布局

瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...

移動端布局

移動端頁面基本上和web端區別不大 但要考慮到 移動端螢幕尺寸不大並且都是全屏布局 而且 螢幕尺寸都不一樣 所有不能使用網頁的固定尺寸來布局 需要使用百分比來布局 優點 移動端基本都相容h5 css3 所有可以放心的去使用css3的樣式來布局 移動端頁面一般都不大 所以標籤使用的並不多 相對乙個一面...