Vue新手求助：根据页面尺寸设置组件CSS内边距的问题

方法一：使用CSS媒体查询（最简单高效，推荐新手） #

直接在组件的<style>标签里写媒体查询，无需JS逻辑，原生CSS就能适配不同尺寸：

/* 常规网页尺寸下的样式 */
.target-element {
  padding: 12px 12px 12px 0px;
  /* 保证标签和输入框水平排列 */
  display: flex;
  align-items: center;
  gap: 8px; /* 可选，控制元素间距 */
}

/* 页面宽高均为768px时的样式 */
@media (width: 768px) and (height: 768px) {
  .target-element {
    padding: 12px 50px 12px 0px;
  }
}

注：如果是最大宽度768px的通用移动端适配（更常见场景），可以把媒体查询改成@media (max-width: 768px)，按需调整即可。

方法二：Vue监听窗口尺寸动态绑定样式（适合需JS控制的场景） #

如果必须通过Vue响应式逻辑控制，可监听resize事件实现：

1. 模板中绑定样式：

<template>
  <div :style="elementStyle" class="horizontal-layout">
    <!-- 你的标签和输入框内容 -->
  </div>
</template>

2. 脚本中写逻辑：

export default {
  data() {
    return {
      elementStyle: {
        padding: '12px 12px 12px 0px'
      }
    }
  },
  mounted() {
    this.updatePadding()
    window.addEventListener('resize', this.updatePadding)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.updatePadding)
  },
  methods: {
    updatePadding() {
      const { innerWidth, innerHeight } = window
      this.elementStyle.padding = 
        innerWidth === 768 && innerHeight === 768 
          ? '12px 50px 12px 0px' 
          : '12px 12px 12px 0px'
    }
  }
}

3. 补充水平排列的基础样式：

.horizontal-layout {
  display: flex;
  align-items: center;
  gap: 8px;
}

效果对比 #

当前768px尺寸下的效果：

目标效果：

内容的提问来源于stack exchange，提问作者JSG