原型导出的 html 页面在手机端适配

原型导出的 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>

注意： 引入路径按自己的真实地址修改

4. 利用在线转换工具 将每个页面的 css 样式的 px 转换为 rem

px 与 rem 互转在线工具

5. 如果部分html页面的样式没改过来，单独将 html 页面用工具转换， 转换后的html页面代码最上边会有 css 样式（多余的），删除就好。