前端pc版的簡單適配

我們都知道對於前端pc版本的適配是一個難題，大部分都是做的媒體查詢。但是有時間公司不要媒體查詢 就是需要不管多大的屏幕都是滿屏顯示。我就在考慮為啥不用rem給pc端做個適配。

我是基於設計圖是1920的做的簡單的js適配。

<script type="text/javascript">
  var winWidth = document.documentElement.offsetWidth || 
  document.body.offsetWidth
  winWidth = winWidth < 1366 ? 1366 : winWidth
  var oHtml = document.getElementsByTagName('html')[0]
  oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'

  window.addEventListener('resize', function () {
    var winWidth = document.documentElement.offsetWidth || document.body.offsetWidth
    winWidth = winWidth < 1400 ? 1400 : winWidth
    var oHtml = document.getElementsByTagName('html')[0]
    oHtml.style.fontSize = 100 * winWidth / 1920 + 'px'
  })
</script>

　　把這個js腳本放到根目錄下，也就是index.html中。我們所測的尺寸去除以100就可以轉化位rem。

順便說一句，我的項目是vue所搭建的。當然現在是vue-cli3的話，就放在public文件下的index文件中。

這樣就完成了簡單的pc端適配