移動端rem定位不準確的解決

2021-10-07 20:11:14 字數 885 閱讀 5823

在專案中使用rem進行適配,在大部分機型上都沒有問題,但是在某些機型上卻出現了百分比的適配正確,rem的適配明顯出現錯誤,導致出現橫向滾動條或者圖示疊起來的問題。

拿到**後重新跑了幾遍發現通過js算出的font-size值應該是正確的,新增到元素的時候也是正確的,那**會出問題呢?列印了很多獲取值之後加上搜尋大家遇到的問題,發現了這篇文章,裡面的情況和我的很相似,於是嘗試著alert了兩個值,乙個是document.documentelement.style.fontsize乙個是window.getcomputedstyle(document.documentelement)['font-size']發現值確實不同,而且有較大的區別,那就明白了解決方法應該是重新去定義一遍font-size的值。

首先要明白document.documentelement.style.fontsize這個值是我們賦給元素的值,而window.getcomputedstyle(document.documentelement)['font-size']是渲染之後拿到的實際上的font-size值,我們的目標應該是讓後面這個值盡可能的等於我們一開始想要給他設定的值。這個轉換要怎麼做呢?

我選擇的做法與鏈結中的方法相同,在第一次賦值font-size之後利用插入乙個寬度為1rem的元素,然後用getcomputedstyle來獲取他的實際寬度(px),那麼得到的值就是1rem渲染時對應的畫素值。

要得到實際上需要設定的font-size值只需要用

最初希望設定的font-size值的平方/1rem實際對應的畫素值

然後將這個值重新賦給元素就行。

實際渲染在移動端其實是會和直接設定的值有所出入。這個點在之後要多注意。

rem在移動端的應用

1rem為頁面根目錄的字型大小。若 html 則1rem 20px 在移動頁面的具體應用。移動端的設計稿一般都是iphone6為基礎設計的,設計稿的寬為750px 手機的物理尺寸是375px 所以在用css的時候,設計尺寸需要初以2 要用rem完成移動端的適配,需要固定瀏覽器的顯示寬度不變。第一 設...

Android手機休眠後時間不準確的解決方案

後來通過找了乙個資料才知道如果要定時執行的話,要用alarmmanager,這是鬧鐘服務,android手機中必須要保證alarmmanager的時鐘跟真實時間同步的.所以在 android手機休眠狀態下,alarmmanager時間是不會變慢的.以下介紹alarmmanager的基本使用.alar...

JS動態計算移動端rem的解決方案

首先介紹下rem 說起rem就的說px,em px為單位 在web頁面初期製作中,我們都是使用 px 來設定我們的文字,因為他比較穩定和精確。但是這種方法存在乙個問題,當使用者在瀏覽器中瀏覽我們製作的web頁面時,他改變了瀏覽器的字型大小,這時會使用我們的web頁面布局被打破。這樣對於那些關心自己 ...