原型导出的 html 页面在手机端适配
以下方法是利用 px 转 rem 的方式
1. 新建全局 js util.js
代码中的 16 为设计稿初始字号, 750 为设计稿宽度
根据设计稿情况自行修改
(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 = 16 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
2. 新建全局 css style.css
#base{top: -3.375rem;}
3. 将js和css引入 html页面
<link rel="stylesheet" type="text/css" href="./style.css"/>
<script src="./util.js" type="text/javascript" charset="utf-8"></script>
注意: 引入路径按自己的真实地址修改