首页>前端教程>JavaScript教程

移动端利用js改变html的font-size值达到适配的方法

移动端适配主要有两种方法,一种是用css,一种是用js,但是根本都是通过修改html的font-size的大小,然后换算成rem倍数关系的值,从而适配不同设备尺寸。

关于css的适配方法,这篇文章已经介绍。

利用calc()函数计算文字大小进行适配

rem和em的区别在于,rem始终是html根的文字大小,不像em会受到父容器的继承关系影响。如果html的font-size为100px,则1rem=100px。然后根据rem计算的值都是基于这个相等关系的。

比如一个div的宽高是750px*300px,则转换成rem则是7.5rem*3rem。

比如一个文字的字体大小是24px,则转换成rem则是0.24rem。

所以,如果根据视口的宽度动态修改html的font-size大小,就相当于修改了1rem的值,比如当视口宽度是375px的时候,1rem=50px。

那么根据rem设置的div大小,图片大小,文字大小都会发生对应的修改,从而达到适配的效果。

注意:不同的浏览器有不同的最小字号,Chrome最小的字体大小为12px。

附上js代码:

! function (e) {
var t = e.document,
n = t.documentElement,
i = e.devicePixelRatio || 1,
a = "orientationchange" in e ? "orientationchange" : "resize",
d = function () {
var e = n.getBoundingClientRect().width || 375;
(1 == i || 750 < e) && (e = 750), n.style.fontSize = e / 7.5 + "px"
};
n.setAttribute("data-dpr", i), t.addEventListener && (e.addEventListener(a, d, !1), "complete" === t.readyState || t.addEventListener("DOMContentLoaded", function () {
setTimeout(d)
}, !1))
}(window)

小米的移动端网站就是利用了这个方法,不过它是以720px为基准的,可以参考一下效果。

小米移动端官网

参考文章:【移动端适配方案二 弹性布局】Flex弹性布局+rem实现移动端适配(JS+rem+viewport)

点赞


1
保存到:

相关文章

Top