前端移动端自适应方案【笔记】

目前使用两种：

1. 百分比 + px

2. rem动态计算

<script>var setPro = 1;(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;setPro = clientWidth / 375;docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';};recalc();if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);</script>复制代码

计算原理：  AP = D/S*基数*rem 

explain : AP，实际字体大小，rem，相对根字体的em值，D，设备宽度，S，设计稿宽度， 基数，根字体1em下px大小。

这里的rem动态计算还需要补全。具体参考网易和手淘。此链接仅供参考。

转载于:https://juejin.im/post/5b14de76e51d4506ab41a147