美文网首页
REM布局-自动计算根fontsize

REM布局-自动计算根fontsize

作者: 哪吒闹海全靠浪 | 来源:发表于2017-04-11 10:58 被阅读0次
/* 根据窗口宽度自动计算html基准字体大小,用于移动端弹性布局 */
(function() {
    var docEl = document.documentElement,
        docBody = document.body,
        baseFontSize = 100,//为了方便,这样rem=px/100
        pageMaxWidth = 750,
        rootHtml = document.getElementsByTagName('html')[0],
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = clientWidth = docEl.clientWidth || docBody.clientWidht;

            //最大宽度显示为750的宽度
            if (clientWidth > pageMaxWidth) {
                clientWidth = pageMaxWidth
            }

            if (!clientWidth) return;
            rootHtml.style.fontSize = baseFontSize * (clientWidth / pageMaxWidth) + 'px';
        };
    if (!window.addEventListener) return;

    window.addEventListener(resizeEvt, recalc, false);

    recalc();
})();

相关文章

  • REM布局-自动计算根fontsize

  • REM布局理解以及解决方案

    REM布局理解以及解决方案 REM的理解 REM是一个相对长度单位,它是基于html根元素的fontSize来动态...

  • 移动端布局

    1. REM布局 根据设计稿动态计算 html 的font-size 公式:fontSize = 100 * (c...

  • js基础总结一

    w一:rem布局公式 document.documentElement.style.fontSize=20*doc...

  • react碰到的问题

    1、rem计算不准去首先要明白document.documentElement.style.fontSize这个值...

  • 前端适配—rem

    rem是相对于根元素 ,浏览器默认html的fontSize为16px,所以1rem就是16px。假如设置html...

  • webpack4进阶知识点(一)

    1.移动端px自动转rem 下载px2rem-loader 页面渲染时计算根元素的font-size使用手机淘宝的...

  • 使用rem作为css响应式布局单位

    rem是以根元素(html)的字体大小为基准 要做到响应式,先设置html根元素的fontsize,并且让其能根据...

  • rem布局

    先简单的一句话介绍一下rem:rem是相对于根元素html的字号(以px为单位)来计算宽高的。 rem布局开发We...

  • 移动端、PC端屏幕适配

    移动端适配 页面引入ydui.flexible.js页面布局采用rem布局rem计算方式:设计图尺寸px / 10...

网友评论

      本文标题:REM布局-自动计算根fontsize

      本文链接:https://www.haomeiwen.com/subject/jbyyattx.html