今天接觸到一個(gè)PC端的頁(yè)面，給的設(shè)計(jì)稿是1920的，并且要求適應(yīng)屏幕寬度，
所以查了下rem。發(fā)現(xiàn)用起來(lái)很方便。

rem

rem是指相對(duì)于根元素字體大小的單位，一個(gè)相對(duì)單位。rem可以做到隨著根元素的字體大小隨之變化，達(dá)到自適應(yīng)屏幕的效果

用法

在head中加入meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

代表寬度是設(shè)備寬度，同時(shí)不允許縮放。
然后給html根元素設(shè)置 font-size為100px,這樣會(huì)方便后面的換算
然后再在JS中加入

var deviceWidth
setHtmlFontSize()

if (window.addEventListener) {
  window.addEventListener('resize', function () {
      setHtmlFontSize()
  }, false)
}
function setHtmlFontSize () {
  // 1920是設(shè)計(jì)稿的寬度，當(dāng)大于1920時(shí)采用1920寬度，比例也是除以19.20
    deviceWidth = document.documentElement.clientWidth > 1920 ? 1920 : document.documentElement.clientWidth
    document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.20 + 'px !important'
}

還有一個(gè)方便px轉(zhuǎn)rem的插件
因?yàn)槲矣玫氖莢scode編輯器，可以在里面添加一個(gè)px to rem，然后ALT+Z就能把選中的PX自動(dòng)換算為rem，不過(guò)記得要更改他的默認(rèn)設(shè)置，他默認(rèn)設(shè)置是16px，把改為100px就可以了。

以上方法是我從百度中學(xué)習(xí)而來(lái)的，用在項(xiàng)目中很完美適配。