关于「青训营 X 码上掘金」主题创作的个人作品

很高兴能在这里和大家分享一下这次创作的个人心得。当我看到主题一之后用代码介绍自己，这个主题让我第一反应是用代码写个简历吗，很显然，这样做可以但不新颖，还能突出爱创新（假的，搞怪）的我，于是乎我想到了科技公司的产品介绍方式。用好看的布局以及新颖的动画介绍自己。这样不仅介绍了自己，还增加了页面的趣味性。

行动开始，我先是找了几个公司官网进行比较参考，最终选定了把腾讯的当基础，同时再加上自己的创意。 想了想，决定先把头尾部分抽离出来当成模块，进而主写主体，让路由实现跳转。

先附上成品链接吧 [个人主页](http://1520203396.space3v.work/#/) 首先做好PC端适配工作

(function flexible (window, document) {
  var docEl = document.documentElement
  // 获取当前显示设备的物理像素分辨率与CSS像素分辨率之比;
  var dpr = window.devicePixelRatio || 1
  // 根据分辨率调整全局字体大小
  function setBodyFontSize () {
    // html已完成加载，则立即调整字体大小，否则等待html加载完成再调整字体大小
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + 'px'
    } else {
      // 监听DOMContentLoaded 事件——当初始的 HTML 文档被完全加载和解析完成之后触发，无需等待样式表
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize()

  // 根据屏幕宽度，重置1rem的长度为当前屏幕宽度的1/10  13.9696
  function setRemUnit () {
    var rem = docEl.clientWidth / 100
    // 1rem的值永远为根元素的字体大小，所以此处通过调整全局字体大小来重置rem
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // 监听resize事件——屏幕大小发生变化时触发
  window.addEventListener('resize', setRemUnit)
  // 监听pageshow事件——显示页面时触发
  window.addEventListener('pageshow', function (e) {
    // 若是浏览器中点击后退时显示页面，则重置rem
    if (e.persisted) {
      setRemUnit()
    }
  })

  // 检测是否支持0.5px
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
})(window, document)

进而编写头尾模块 这里代码很多，就不一一粘贴了，直接上成品图

这时候，突然发现右侧的滚动栏丑的爆炸，于是乎把他删了去

::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}

最后就是主体编写了，，中途看了下阿凡达2水之道，真的精彩绝伦。

最后的最后，该主页也会进行不断完善，敬请期待吧。