vue如何进行页面宽度适配

首先,在方法methods内创建适配方法 (适配的大小比例可以根据实际情况进行修改,下面是pc端大多情况下可以使用的)

   resizeWidth () {
      this.$nextTick(() => {
        let width = $('#app').width() - (this.$store.state.app.collapsed ? 83 : 210)
        let scale = (width / 1880) < 0.6354 ? 0.6354 : (width / 1920)
        $('#homePage').css('transform', `scale(${scale}, ${scale})`)
      })
    },

vue如何进行页面宽度适配_第1张图片

 其次,在渲染时调用这个适配方法,同时在改变浏览器内的宽度时进行适配

vue如何进行页面宽度适配_第2张图片

最后,一般这样就可以完成pc端宽度适配 

你可能感兴趣的:(css,html,html5)