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'
}

4、根據高保真還原
每個單位大小用實際值除以100得到相對的rem值。

文章鏈接