rem

2019-05-31  本文已影响0人  撕心裂肺1232

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)
上一篇下一篇

猜你喜欢

热点阅读