H5项目配置px与rem适配案例

最新推荐文章于 2025-05-25 11:02:23 发布

帅帅的记忆

最新推荐文章于 2025-05-25 11:02:23 发布

阅读量967

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-app html 文章标签：前端 vue.js html5

本文链接：https://blog.csdn.net/weixin_44994731/article/details/114916847

html 同时被 2 个专栏收录

6 篇文章

订阅专栏

uni-app

4 篇文章

订阅专栏

本文介绍了一个H5项目中实现px与rem单位转换的适配方案，通过JavaScript动态调整根元素字体大小，确保不同设备上的布局一致。文中提供了一个resize.js脚本实例，演示了如何进行单位换算，并保持页面响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5项目配置px与rem适配案例
说明：px与rem的适配不是固定的，可调整，本案例的换算关系是1rm=50px
如下图所示
在这里插入图片描述

本案例设置如下：
一、新建一个resize.js，代码如下

(function (win, lib) {
    var _width = 750,
        _fontSize = 100,
        flexRem = lib.flexRem || (lib.flexRem = {}),
        tid;
    var docEl = document.documentElement;

    function refreshRem() {
        var deviceW = docEl.clientWidth;
        // 限定宽度最高540
        // deviceW >=540 && (deviceW = 540);
        var rem = deviceW / (_width / _fontSize);
        docEl.style.fontSize = rem + 'px';
        flexRem.rem = rem;
    }
    refreshRem();
    flexRem.refreshRem = refreshRem;
    flexRem.rem2px = function (d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    };
    flexRem.px2rem = function (d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }
    window.addEventListener('resize', function (e) {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
})(window, window['lib'] || (window['lib'] = {}));

二，在index.html或index.js中引入resize.js
本案例是在index.js中引入的resize.js