美文网首页
rem适配问题

rem适配问题

作者: 小曼杂货铺 | 来源:发表于2017-01-06 17:46 被阅读0次
(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 = 20 * (clientWidth / 320) + 'px';
        };

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

body{font-size:20px}
说明:iphone4/5/5s(320px)下,1rem = 20px

相关文章

  • rem适配问题

    body{font-size:20px}说明:iphone4/5/5s(320px)下,1rem = 20px

  • vue移动端布局单位适配(postcss)

    一、需要解决的问题 二、rem单位与适配原理 px、em、rem区别介绍[https://www.runoob.c...

  • rem 的适配问题

  • 适配rem

    PPI 计算 适配rem

  • 谈谈 rem 与 vw -- rem

    谈谈rem与vw — rem 写这篇文章的原因,源于我在头条的面试。面试官问到了关于手机端适配rem的问题,这个问...

  • 移动端适配

    移动端适配 1.适配宽高等问题REM方案:改变页面根部的font-size js方案:通过缩放viewport,达...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。...

  • 移动端rem适配

    三:多屏适配布局问题 出处:【原创】移动端高清、多屏适配方案 再谈移动端适配和点5像素的由来 使用相对单位:rem...

  • React 配置 rem (移动端适配)

    移动端适配方案介绍 在移动端中,为了设配不同的设备,通常使用rem来做适配。 rem是通过根元素进行适配的,网页中...

网友评论

      本文标题: rem适配问题

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