响应式记录

一、页面css设计流程：

1. 参照设计稿得到页面宽度
2. 利用margin、padding、position计算出像素距离值
3. 写好后进行响应式调整

二、响应式自适应：

1. body宽度100%
2. 引入js文件，计算单位vw144px。144根据字体计算得到
3. 选定元素宽度除以单位vw144px计算自身比例
4. 将计算得到的比例值添加单位rem。rem根据字体vw144px自适应

js自适应函数：

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  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))

核心代码

核心代码
释义：给根元素字号设置成屏幕宽度的 1/ 10，当屏幕变化时重新计算
因为html就是根元素 根元素字体放大 调距离是方便了 但是内容的字号也会跟着无限放大，显然不合适，所以代码里给body设置了最小正常字号大小 兼容代码

做高分屏兼容，这样你420px 就可以直接写 420 / 144 = 2.92rem

图片实现自适应缩放：

• 方法一：对父容器设定rem宽度与高度，图片自身width:100%
• 方法二： 对图片设定rem宽度

server页面核心代码:

1.line-height 为子元素设置line-height撑开高度
2.max-weight 为子容器设置max-weight，margin： 0 auto；实现内容居中