移动端自适应解决方案

1.使用vw 和 rem结合

html {

font-size: 3.2vw /* 在375px的设备下 1rem = 3.2vw = 12px (实际像素 12px/ 设备像素375 * 100) */

}

.root {

font-size: 1rem;

height: 10rem;

}

<div id="root" style="text-align:center"></div>

2.JS + rem结合

html {

font-size: 14px;

}

h1 {

font-size: 2rem; /* 此时对应的 font-size 转换过来即 28px */

padding-top: 1rem; /* 同理为 14px */

}

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

3.

4.

5.

6.

7.

8.

9.

10.

11.