h5學習筆記 rem單位在一些安卓機計算異常

2021-10-05 21:53:42 字數 2992 閱讀 1398

混合開發增加了除錯的難度,也增加了人員開發的溝通成本。使用了rem單位進行適配在大多數機型表現還算ok。我們通常的做法是設定html 根字型大小,然後通過rem來轉換。如果設定根字型是100px=1rem,div寬如果是200px,則值為2rem。但是在現今碎片化嚴重的安卓機環境中,。這種想當然的想法會被打臉。經過查詢了一些資料

後得到一些情況,在大多數情況下rem的相容性還是很好。但是也會出現一些安卓機在計算過程**比例計算不正常的情況。所以這種相容性需要進行排查。

webapi 提供了乙個叫window.getcomputedstyle() 方法,這個方法能夠計算出css屬性值。

摘要

window.getcomputedstyle()方法返回乙個物件,該物件在應用活動樣式表並解析這些值可能包含的任何基本計算後報告元素的所有css屬性的值。 私有的css屬性值可以通過物件提供的api或通過簡單地使用css屬性名稱進行索引來訪問。

有了這個計算方法,可以對一些元素進行資訊獲取。

const

getbodywidth

=function

(element)

else

}

var body = document.

getelementsbytagname

('body')[

0]; body.style.width =

'10rem'

;const bodywidth =

getbodywidth

(body)

; console.

log(bodywidth)

;//獲取得到乙個寬度

首先編輯乙個按鈕,然後引入rem適配。

rem實驗title

>

head

>

>

body,html,div

.ui-btn-pay

.ui-btn-pay:active

style

>

>

style

="text-align

: center;

">

class

="ui-btn-pay"

>

馬上物件

div>

div>

src=

"./test.js"

>

script

>

body

>

html

>

我們以字型100px進行計算,設計稿尺寸750(可以是375),然後進行比例計算。這個比例計算以文件的寬和設計稿寬進行比較,得到縮放比例。

拿到了這個比例好,再和根字型大小進行縮放。

在大多數情況下,這種計算還算可以的。只是在一些安卓機器出現了問題。我舉個例子。

當你設定body為rem單位的時候,你可能會認為獲取到body的寬度和輸入 的值是一樣。當初我也是這樣認為這是理所當然的事情。不然這個就是有計算的問題。

100px = 1rem。那麼200px = 2rem 是理所當然。實際上打個比方將body =2rem,獲取回來的不一定是等於200px

當然這種機型是極小數出現,大部分情況還是會相同。所以可以嘗試試探設定後,和原來輸入的值到底相不相等。有了這個基礎後,這個試探性設計就可以結合到原來普遍的rem計算縮放。

var body = document.

getelementsbytagname

('body')[

0]; body.style.width =

(width/rem)

+'rem'

;//賦值進行試探

function

rem(

)//檢測字型設定是否真的生效

function

testfontsize

(width,rem)

else

}const bodywidth =

getbodywidth

(body)

;//測試對比值情況

console.

log(

"width:"

+width+

" "

+"bodywidth:"

+bodywidth)

;alert

("width:"

+width+

" "

+"bodywidth:"

+bodywidth);if

(bodywidth != width)

body.style.width =

'100%';}

rem();

window.

addeventlistener

('resize'

,function()

,false

);

在大多數的rem還是準確的,這種不準確的機型猜測是一些系統版本引起。屬於版本問題。事實上,這種問題不應該發生,安卓機器碎片化嚴重的時候,前端複雜度已經大大增加了不少的試錯成本。造成了很大困擾。

HTML5學習筆記《一》 認識H5

html5 將成為 html xhtml 以及 html dom 的新標準。html 的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 最新版本的 safar...

h5呼叫底層介面的一些知識

之前接觸過這方面的知識,一直想寫一些關於 的文字,但考慮到浪費時間,又不具備大神的實力,也不想去把別人的 照搬過來,所以一直都是空白著的,今天敲 的時候,有了乙個比較好的想法,第一,定位在學習這一塊,去學習一些領域的新知識,並分享自己每天的學習成果,第二,總結工作中遇到的 解決的問題,拿出自己的de...

h5平時遇到的一些問題

乙個是看有沒有儲存 另乙個檢查檔案路徑 url跳轉啥的,看看是不是修改的檔案錯了 1 不渲染原因 vue響應式更新檢視,只讀取data中定義的資料,這裡只在data中定義了乙個空物件,而頁面渲染用到的是data中的這個物件的乙個屬性。這種情況下vue無法拿到物件身上的這個屬性。陣列同理 解決 jso...