页面自适应

页面自适应

1.在utils文件夹下新建comefort_page.js

  /*
  * 做页面自适应
  * 0. 项目跟元素 id = root
  * 1. width 为适应基准
  * 2. 无论 width height 如何变化，都要输出 16 / 9 比例的页面
  */

  export default () => {
    window.onresize = () => {
      document.querySelector('#root').style.transform = `scale(${document.body.offsetWidth / 1920})`
      document.querySelector('#root').style.transformOrigin = `left top 0px`
      document.querySelector('#root').style.width = `1920px`
      document.querySelector('#root').style.height = `1080px`
    }
    document.querySelector('#root').style.transform = `scale(${document.body.offsetWidth / 1920})`
    document.querySelector('#root').style.transformOrigin = `left top 0px`
    document.querySelector('#root').style.width = `1920px`
    document.querySelector('#root').style.height = `1080px`
  }

2.在App.tsx跟组件里面引入 comfort-page.js

  import ComfortPage from './utils/comfort_page'

  # 在 *componentDidMount* 生命周期里执行
  componentDidMount(){
    ComfortPage()
  }

3.搞定！