移动端和PC端响应式布局

只需要在需要响应式布局的页面添加下面的方法即可,在react或vue的脚手架中只需要在index.html文件中添加改方法就可以实现全局响应式布局了(因为react和vue都是单页面)

function remSize() {
  // 获取移动设备的宽度 
  var deviceWidth = document.documentElement.clientWidth || window.innerWidth
  // 设置最大宽度 (需要限制宽度时添加)
  if (deviceWidth >= 750) {
    deviceWidth = 750
  }
  // 设置最小宽度 (需要限制宽度时添加)
  if (deviceWidth <= 320) {
    deviceWidth = 320
  }
  document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px'
  // 在width=375px时 10px = 0.1rem 在不限制宽度时width:100%; 等同于 width:7.5rem;
  document.querySelector('body').style.fontSize = 0.32 + 'rem'
}

remSize()
// 窗口发生变化时调用
window.onresize = () => {
  remSize()
}