PC端自适应-rem

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

使用步骤如下：

1、在html的head中加上meta标签

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

代表宽度是设备宽度，同时不允许缩放。
2、设置根元素——相对于根元素html

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

设置这个值，谷歌浏览器不会受影响，当是IE浏览器等时，会受影响，根据实际去调整值。
3、计算不同屏幕时根元素
可以使用媒体监听，也可以使用动态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'
}

var deviceWidth;
setHtmlFontSize();
function setHtmlFontSize() {
   let deviceWidth = document.documentElement.clientWidth;
   document.getElementsByTagName("html")[0].style.cssText =
     "font-size:" + deviceWidth / 11 + "px !important";
 }

4、根据高保真还原
每个单位大小用实际值除以100得到相对的rem值。