vue设置div位置不随页面大小变化

你可以通过设置该 div 的 CSS 样式来实现其位置不随页面大小变化。具体而言，你可以将该 div 的 position 属性设置为 fixed，然后通过 top、left、right、bottom 等属性来指定其在页面中的位置。例如：

#my-div {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}

这段代码会将 id 为 my-div 的 div 固定在距离页面顶部 100px，距离页面左侧居中的位置，并且不会随着页面大小变化而改变位置。其中，transform: translateX(-50%) 是为了将该 div 水平居中，因为 left: 50% 只能将其左侧边缘居中。

相关问题

vue项目中怎么响应式设置页面大小

在Vue项目中，可以使用计算属性（computed）来设置响应式的页面大小。我们可以监听窗口的大小变化，然后根据窗口大小动态设置页面的样式。

举个例子，假设我们要设置一个响应式的页面高度，我们可以这样写：

<template>
  <div :style="{ height: pageHeight + 'px' }">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  computed: {
    pageHeight() {
      // 获取窗口高度
      const windowHeight = window.innerHeight;
      // 减去顶部和底部的高度
      const headerHeight = 64;
      const footerHeight = 48;
      return windowHeight - headerHeight - footerHeight;
    },
  },
};
</script>

在这个例子中，我们使用了计算属性 `pageHeight` 来计算页面的高度。我们监听了窗口的大小变化，并动态计算页面高度。在模板中，我们使用 `:style` 绑定了一个对象，对象中的 `height` 属性使用了 `pageHeight` 计算属性的值。

这样，当窗口大小变化时，页面高度也会随之变化，从而实现了响应式的页面大小设置。

监听页面高度变化_vue监听页面大小变化重新刷新布局

你可以使用Vue的watch属性来监听页面高度变化，然后在回调函数中重新刷新布局。具体的代码实现如下：

<template>
  <div ref="page" class="page">
    <!-- your page content here -->
  </div>
</template>

<script>
export default {
  name: 'YourComponent',
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.$nextTick(() => {
        // do your layout refresh here
      })
    }
  },
  watch: {
    '$refs.page.offsetHeight': function(newVal, oldVal) {
      this.handleResize()
    }
  }
}
</script>

在这个例子中，我们监听了窗口大小的变化，并且使用了Vue的watch属性来监听页面高度的变化。当页面高度变化时，我们会在回调函数中重新刷新布局。请注意，我们使用了Vue的$nextTick方法来确保页面已经完全渲染完成后再进行布局刷新。