移動端專案中使用rem布局,華為手機不相容。

2021-10-25 08:39:47 字數 873 閱讀 6279

在上一次做人臉審核的專案(h5)的時候,需要適配各種裝置手機的螢幕,

剛開始的時候使用的那套(不相容華為)rem的計算邏輯,在測試的時候卻發現在華為一些部分機型不適配,超出了螢幕。

後來在網上查閱資料發先了一套新的rem計算的公式,經本人親自實驗,

可以相容華為手機,下面上**:

(

function

(doc, win)

else

var html = document.

getelementsbytagname

('html')[

0];var settedfs = settingfs =

parseint

(100

*(clientwidth /

750));

var whilecount =0;

while

(true

)else

break;if

(whilecount++

>

100)

break}}

;if(!doc.addeventlistener)

return

; win.

addeventlistener

(resizeevt, recalc,

false);

doc.

addeventlistener

('domcontentloaded'

, recalc,

false);

})(document, window)

;

我當時的設計圖是750的,上上面的**是按照750的尺寸進行計算的,也可以根據自己的設計圖進行自由換算的。

在vue移動端專案中使用rem布局簡易教程

rem布局由於其根據螢幕寬度的改變修改相應的rem與px的轉換比例,這樣非常適合移動端的專案。在不同的解析度下,都會有較好的顯示效果。在使用rem布局的時候需要引入flexible.js。js會根據螢幕的寬度計算html的根字型大小 在vue專案中只需要安裝raziel flex模組引用就行 安裝方...

移動端使用rem布局

移動端的px其實指的是pt,也就是邏輯解析度。以iphone6為例,寬度是750px,但是在css中iphone6的寬度是375px,也就是375pt,而設計稿一般是750px的。所以在移動端中css的px是設計稿中px的一半。將設計稿中的px轉換為移動端中的px 如果設計稿是750px的,在其中有...

移動端rem布局

時隔半年,再次回顧移動端開發,感覺自己又張知識了 我們平常用的較多的單位是px,百分比,rem,em,vw,vh,但是在移動端用的比較多的還是rem,但是他在用的過程中要注意什麼呢,怎麼用呢,下面就開始啦。他是乙個度量單位,可以用他作為高寬,字型的單位。他以html中設定font size的大小為基...