rem计算

作者: 十年之后_b94a | 来源:发表于2018-09-12 10:01 被阅读0次

1、使用media查询

html {font-size: 625%;}
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}

2、使用js计算 (推荐)

(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);

相关文章

  • 动态修改font-size和rem

    2.rem的基准值计算:1rem = 16px 180/16 rem = 180px3.rem的数值计算与构建4...

  • 适配rem

    PPI 计算 适配rem

  • rem计算

    1、使用media查询 2、使用js计算 (推荐)

  • css单位px、rem、vw

    css单位 px 、rem 、vw 都是相对单位 rem rem 的计算是相对于 html 页面的 font-si...

  • web移动端REM适配

    一、REM适配原理 rem是相对单位,rem是相对于HTML标签的字号计算结果,1rem = 1HTML字号大小。...

  • 动态REM

    什么是rem? rem是相对于根元素html字体大小来计算的,即( 1rem = html字体大小 ) rem和e...

  • CSS

    em & rem em:依赖父元素计算 rem:依赖根元素计算(IE6-8不兼容) vw是view-width的缩...

  • vue-cli 自己定义rem

    1、在assets中建立js文件,新建rem.js文件,将计算rem方法写入rem.js文件当中 如750设计稿 ...

  • rem-web 前端页面适配

    web 前端页面适配, rem 解决方案,以及解决部分 Android 手机(例如华为) 通过 rem 计算的宽度...

  • em和rem

    rem是跟据html元素的字体大小计算 em根据当前字体的大小进行计算 终极案例 经常比较的是em和rem 但是我...

网友评论

      本文标题:rem计算

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