rem

作者: 撕心裂肺1232 | 来源:发表于2019-05-31 14:44 被阅读0次

    rem相对单位:
    rem是 CSS3 新增的一个相对单位(root em),即相对 HTML 根元素的字体大小的值。

    em 相对单位,也是一个相对单位,却是相对于当前对象内文本的字体大小。
    一般建议在 line-height 使用 em。因为在需要调整字体大小的时候,只需修改 font-size 的值,而 line-height 已经设置成了相对行高了。
    css:

    html,body{
        font-size: 100
    }
    

    js:

    function changFontSize(){
          var window_width=$(window).width();
          var fontSize=(window_width/1920)*100;
          $('.z_page').css('font-size',fontSize+'px');
     }
    

    网上参考版本:
    https://qishaoxuan.github.io/css_tricks/

    (function (doc, win) {
      var docEl = doc.documentElement
      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    
      function recalc() {
        var designWidth = 750
        var clientWidth = docEl.clientWidth
        if (!clientWidth || clientWidth > designWidth) return
        docEl.style.fontSize = (100 * clientWidth / designWidth) + 'px'
      }
    
      if (!doc.addEventListener) return
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window)
    

    相关文章

      网友评论

          本文标题:rem

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