H5 px rem 单位换算

悠悠 2021-09-14 03:04 400阅读 0赞

;(function(w) {  
        var _config = w.comConfig,
            comFuc = {
            init: function(){ 
                var self = this;
                self.configRem();            
            },
            configRem: function(){ 
                if(_config && !_config.hideRem){  
                    fixRem();
                    window.addEventListener('resize', fixRem, false);           
                }
            },
            fixRem: function(){ 
                var windowWidth =  document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
                var rootSize = 28 * ( windowWidth / 375);
                var htmlNode = document.getElementsByTagName("html")[0];
                htmlNode.style.fontSize = rootSize+'px';
            }
        };
    
        //通过window width 修改html font-size
        function fixRem(){ 
            var windowWidth =  document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
            var rootSize = 28 * ( windowWidth / 375);
            var htmlNode = document.getElementsByTagName("html")[0];
            htmlNode.style.fontSize = rootSize+'px';
        }
        // fixRem();
    
        comFuc.init();
    
    })(window);

发表评论取消回复

表情：

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

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

相关阅读

相关兼容ie8的rem.js单位换算错误

原理:rem.js是通过插入一个div,这个div的样式为: width:1em; position:absolute; visibility:hidden; pad

谁践踏了优雅/ 2022年12月22日 09:39/ 0 赞/ 97 阅读

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

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

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

相关 h5页面自适应移动端 px2rem

<script> resize() window.onresize = function() { res

超、凢脫俗/ 2022年10月01日 13:57/ 0 赞/ 233 阅读

相关 CSS里面的em和px的单位换算

em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font

浅浅的花香味﹌/ 2022年08月24日 11:27/ 0 赞/ 167 阅读

相关 css中单位px和em,rem的区别

国内的设计师大都喜欢用px，而国外的[网站][Link 1]大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？

约定不等于承诺〃/ 2022年07月16日 02:12/ 0 赞/ 231 阅读

相关前端px与rem换算

1.为什么要使用rem？之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。例如以屏幕320像素为基准，设置1，那屏幕37

r囧r小猫/ 2022年06月03日 00:55/ 0 赞/ 320 阅读

相关 rem 的计算公式，小程序的单位换算

监听屏幕在大小改变 ,recalc 是计算方法 window.addEventListener(resizeEvt,recalc,false); 计算原理是 re

谁践踏了优雅/ 2022年05月30日 06:53/ 0 赞/ 648 阅读

相关 app移动端 rem和px的换算

rem.js文件 / Created by zhaolele on 2018/7/25. / (function(doc, win) {

约定不等于承诺〃/ 2022年03月12日 05:11/ 0 赞/ 252 阅读

相关 css单位em、px和rem

在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将px转换为em或者rem，下面就上述三者之间的联系进行讲解： em与px转换一般浏览器默认1em=16px，

绝地灬酷狼/ 2022年01月05日 09:27/ 0 赞/ 262 阅读

相关 H5 px rem 单位换算

;(function(w) { var _config = w.comConfig, comFuc = {

悠悠/ 2021年09月14日 03:04/ 0 赞/ 401 阅读