在上一次做人臉審核的專案(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的大小為基...