移动端适配方法比较多,最钟爱的还是REM适配,通过js改变font-size的数值。
注:对于部分机型(如Nexus5、荣耀X4等)对于REM计算有偏差,比如fons-size设置为设置100px,通过getComputedStyle获取到的值为85px,需要对这种情况进行校正。
<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是设计稿尺寸,100为基数,例如:设计稿中某元素为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>