移动端适配主要有两种方法，一种是用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）