前端移動端自適應方案【筆記】

蘇水軒發表於2018-06-04
目前使用兩種:

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動態計算還需要補全。具體參考網易和手淘。此連結僅供參考。


相關文章