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端适配