pc端自适应——rem

遇到项目需求变更，需要自适应4:3主流屏幕，于是采用了rem，和动态js计算根元素。

1.rem

rem是指相对于根元素字体大小的单位，一个相对单位。rem可以做到随着根元素的字体大小随之变化，达到自适应屏幕的效果。

2.步骤

• 在html的 head中加上meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
代表宽度是设备宽度，同时不允许缩放。

• 设置根元素-相对于根元素html

html {font-size: 100px;} //100px方便计算，实际值需要自己确定

• 计算不同屏幕时根元素

可以使用媒体监听，也可以使用动态js计算，本文因为不确定自适应数量使用动态计算

var deviceWidth
setHtmlFontSize()

if (window.addEventListener) {
  window.addEventListener('resize', function () {
      setHtmlFontSize()
  }, false)
}
function setHtmlFontSize () {
  // 1366是设计稿的宽度，当大于1366时采用1366宽度，比例也是除以13.66
    deviceWidth = document.documentElement.clientWidth > 1366 ? 1366 : document.documentElement.clientWidth
    document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 13.66 + 'px !important'
}

• 根据高保真还原

每个单位大小用实际值除以100得到相对的rem值。

然后就完美还原辣！