移动端rem自适应

关注

原创最新推荐文章于 2026-02-04 00:52:37 发布 425 阅读 AI 写同款· GEO 优化 ›

移动端H5自适应：基于rem的响应式布局实战指南本文深入探讨了移动端H5开发中基于rem的响应式布局方案。通过核心公式与JavaScript动态设置根字体大小，结合PostCSS插件实现px到rem的自动转换，有效解决了多屏幕尺寸适配难题。文章还提供了处理1像素边框、兼容第三方UI库以及适配横屏与大屏的实战技巧，是一份高效的移动端自适应实战指南。阅读详情

新建rem.js文件

/*
手机wap页面retina适配，基于rem;  1rem = 100px(iPhone6)
 */
;(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 = 100 * (clientWidth / 750) + 'px';
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

在页面中引入即可

收录于