移動(dòng)端適配方法比較多纷铣,最鐘愛的還是REM適配,通過js改變font-size的數(shù)值战转。
注:對(duì)于部分機(jī)型(如Nexus5搜立、榮耀X4等)對(duì)于REM計(jì)算有偏差,比如fons-size設(shè)置為設(shè)置100px槐秧,通過getComputedStyle獲取到的值為85px啄踊,需要對(duì)這種情況進(jìn)行校正忧设。
<script>
// 適配js
(function () {
function get() {
var size = window.getComputedStyle(document.documentElement, null).getPropertyValue("font-size");
return parseFloat(size);
}
function set(size) {
document.documentElement.style.fontSize = size + "px";
}
// 720是設(shè)計(jì)稿尺寸,100為基數(shù)颠通,例如:設(shè)計(jì)稿中某元素為100px址晕,CSS中是1rem
var size = 100 * (window.innerWidth / 720);
set(size);
// 校正html字體大小
function fix() {
var target = 100 * (window.innerWidth / 720).toFixed(4);
var current = get().toFixed(4);
if (current != target) {
var size = target * (target / current);
set(size)
}
}
fix();
})();
</script>