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

逃离我推掉我的手 2022-10-22 11:55 293阅读 0赞

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

本案例设置如下：  
一、新建一个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

import "assets/js/resize.js"

三，其他  
使用uin-app开发的项目，最好使用rpx单位  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20221022/8d91fc4c4107488dba2af41847e9d5f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/974f38b2789446989d5ae7bca7c58fef.png

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目，移动端rem适配（rem移动端适配）

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm in

朱雀/ 2023年10月02日 23:41/ 0 赞/ 181 阅读

相关 sass px转rem适配方案

// rem $browser-default-font-size: 16px ; html { font-size: $br

约定不等于承诺〃/ 2023年06月27日 12:57/ 0 赞/ 12 阅读

相关 h5移动端适配(px-＞vw/vh)

vw适配 1.browserslistrc文件删除 not dead 2. 安装依赖 cnpm i -S postcss-px-to-viewport

傷城~/ 2022年12月26日 14:26/ 0 赞/ 196 阅读

相关移动端页面适配(px2rem)

1、安装引入lib-flexible . 　　安装lib-flexible：　　npm i lib-flexible --save

快来打我*/ 2022年12月16日 13:12/ 0 赞/ 222 阅读

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

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

逃离我推掉我的手/ 2022年10月22日 11:55/ 0 赞/ 294 阅读

相关 h5轻松实现rem适配

1. vs Code安装 px to rem & rpx (cssrem) ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

分手后的思念是犯贱/ 2022年10月12日 14:55/ 0 赞/ 220 阅读

相关 vue移动端适配 -- px2rem

vue移动端适配 -- px2rem 安装 npm install px2rem-loader lib-flexible --save 在main.js中引入 i

朱雀/ 2022年04月15日 00:48/ 0 赞/ 343 阅读

相关 vue移动端h5适配解决方案(lib-flexible+px2rem-loader)

先介绍用到的两个工具： px2rem-loader：将css中的px转为rem单位，用了它就不用自己计算rem值了 lib-flexible：根据设备宽度，修改根元

骑猪看日落/ 2022年03月15日 02:58/ 0 赞/ 545 阅读

相关对于页面适配，使用 px 与rem区别！

css中的单位很多，%、px、em、rem，以及比较新的vw、vh等。每个单位都有特定的用途，比如当需要设置一个矩形的宽高比为16:9，并且随屏幕宽度自适应时，

朴灿烈づ我的快乐病毒、/ 2021年09月18日 15:58/ 0 赞/ 536 阅读

相关 rem rem适配案例及讲解

[来源][Link 1] 网易的做法: 先来看看网易在不同分辨率下，呈现的效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

淡淡的烟草味﹌/ 2021年07月24日 22:43/ 0 赞/ 541 阅读