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

首先介紹下rem

說起rem就的說px，em；

px為單位

在web頁面初期製作中，我們都是使用「px」來設定我們的文字，因為他比較穩定和精確。但是這種方法存在乙個問題，當使用者在瀏覽器中瀏覽我們製作的web頁面時，他改變了瀏覽器的字型大小，這時會使用我們的web頁面布局被打破。這樣對於那些關心自己**可用性的使用者來說，就是乙個大問題了。因此，這時就提出了使用「em」來定義web頁面的字型。

em為單位font size of the element

前面也說了，使用是「px」為單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁面時會存在乙個問題，要解決這個問題，我們可以使用「em」單位。richard rutter'在《how to size text using ems》一文中有做過詳細的介紹，追至早一點，richard rutter也在《how to size text in css》中進行過深入的剖析。

這種技術需要乙個參考點，一般都是以的「font-size」為基準。比如說我們使用「1em」等於「10px」來改變預設值「1em=16px」，這樣一來，我們設定字型大小相當於「14px」時，只需要將其值設定為「1.4em」。

body

4h1 7p

10li

為什麼「li」的「1.4em」是不是「14px」將是乙個問號呢？如果你了解過「em」後，你會覺得這個問題是多問的。前面也簡單的介紹過一回，在使用「em」作單位時，一定需要知道其父元素的設定，因為「em」就是乙個相對值，而且是乙個相對于父元素的值，其真正的計算公式是：

所以em：1 ÷ 父元素的font-size × 需要轉換的畫素值 = em值

這樣的情況下「1.4em」可以是「14px」,也可以是「20px」，或者說是「24px」，總之是乙個不確定值，那麼解決這樣的問題，要麼你知道其父元素的值，要麼呢在任何子元素中都使用「1em」。這樣一來可能又不是我們所需要的方法。

rem為單位font size of the root element

css3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。

我們來看乙個簡單的**例項：

html

2body

3h1

我在根元素中定義了乙個基本字型大小為62.5%（也就是10px。設定這個值主要方便計算，如果沒有設定，將是以「16px」為基準）。從上面的計算結果，我們使用「rem」就像使用「px」一樣的方便，而且同時解決了「px」和「em」兩者不同之處。

那麼在rem的計算上，我們可以用：

1
html 
4@media only screen and(min - width: 401 px) 8}
9@media only screen and(min - width: 428 px) 13}
14@media only screen and(min - width: 481 px) 18}
19@media only screen and(min - width: 569 px) 23}
24@media only screen and(min - width: 641 px) 
28}

也可以

;
(function
(win, lib) );
if(metael) 
} else
if(flexibleel) 
if(maximumdpr) }}
if (!dpr && !scale)  
else
if (devicepixelratio >= 2 && (!dpr || dpr >= 2))  
else
} else
scale = 1 /dpr;
}docel.setattribute('data-dpr', dpr);
if (!metael)  
else
}function
refreshrem() 
var rem = width / 10;
docel.style.fontsize = rem + 'px';
flexible.rem = win.rem =rem;
}win.addeventlistener('resize', function
() , 
false
);    win.addeventlistener('pageshow', function
(e) 
}, false
);    
if (doc.readystate === 'complete')  
else
, false
);    }
refreshrem();
flexible.dpr = win.dpr =dpr;
flexible.refreshrem =refreshrem;
flexible.rem2px = function
(d) 
return
val;
}flexible.px2rem = function
(d) 
return
val;
}})(window, window['lib'] || (window['lib'] = {}));

參考：

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

移動端布局js動態計算rem動態設定頁面的字型大小

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

rem在移動端的應用

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

移動端布局js動態計算rem動態設定頁面的字型大小

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

rem在移動端的應用

相關推薦