One article explains the big screen adaptation (four screens are not afraid)

foreword

 Government and enterprise projects are indispensable for large-screen adaptation scenarios. How to create a perfect large-screen adaptation solution?

solution

Large screen adaptation needs to start from the following aspects, the first is the width and height, the second is the font size, and the third is the setting of the three-party library.

1. For width and height:

All box model layout related (margin/padding/width/height) from the outermost layer to the innermost are all done with percentages, and some unexpandable heights can be done with vh.

2. For font size:

Need to use rem, and encapsulate the corresponding flexible, corresponding to the visual draft

for example:

const baseSize = 16
// 设置 rem 函数
function setRem () {
  const scale = document.documentElement.clientWidth / 1920
  document.documentElement.style.fontSize = baseSize * Math.min(scale) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

At the same time encapsulate css preprocessor related functions:

@function pxTorem($px){//  默认16px
  @return $px / 16 * 1rem;
}

3. For the three-party library

Some third-party libraries are set based on pixels, so in large-screen videos, manual calculation is required, so we need to do a piece of logic when resizing to get a charScale zoom ratio. Here is an example of Vue mixin:

import _ from 'lodash'

export default {
  data() {
    return {
      charScale: 0.5
    }
  },
  mounted() {
    this.__resizeHandler = _.debounce(() => {
      const clientWidth = document.body.clientWidth
      if (clientWidth) {
        this.charScale = clientWidth / 1920
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
    this.charScale = document.body.clientWidth ? document.body.clientWidth / 1920 : 1
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.__resizeHandler)
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.__resizeHandler()
      }
    }
  }
}