如何基于SCSS媒体查询动态设置Angular组件的size输入属性？

问题背景 #

我正在使用一个来自外部库的组件<some-element>，它拥有自定义的size输入属性，用于设置元素尺寸并应用额外样式：

<some-element size="small">

我在SCSS文件中使用media查询基于浏览器宽度应用样式，因此想知道是否可以基于该宽度同步设置组件的size输入属性。

我知道可以在模板中放置两个不同输入的组件实例：

<some-element class="small" size="small">
<some-element class="large" size="large">

然后通过small和large类的display属性切换显示。但我希望避免这种方式，因为<some-element>组件有不少输入和输出属性，且我在多处使用该组件，这会导致大量代码重复。请问是否有可行方案？比如在SCSS中设置size变量后在组件中读取，同时支持浏览器动态调整窗口大小。

可行方案 #

方案1：监听媒体查询状态（高效无冗余） #

直接用window.matchMedia监听媒体查询的状态变化，动态修改组件的size属性，比监听resize事件更高效——只有当查询条件切换时才触发逻辑。

示例代码（原生JS，框架可适配）：

// 和你的SCSS媒体查询规则保持一致
const smallScreenQuery = window.matchMedia('(max-width: 767px)');

// 批量更新所有<some-element>的size属性
function updateSize() {
  const targetElements = document.querySelectorAll('some-element');
  targetElements.forEach(el => {
    el.setAttribute('size', smallScreenQuery.matches ? 'small' : 'large');
  });
}

// 初始化执行一次
updateSize();
// 监听查询状态变化
smallScreenQuery.addEventListener('change', updateSize);

如果是Vue/React这类框架，可以封装成通用指令或Hook：
比如Vue全局自定义指令：

app.directive('responsive-size', {
  mounted(el, binding) {
    // 支持自定义查询规则和size值
    const { query = '(max-width: 767px)', smallVal = 'small', largeVal = 'large' } = binding.value || {};
    const mediaQuery = window.matchMedia(query);

    const update = () => {
      el.setAttribute('size', mediaQuery.matches ? smallVal : largeVal);
    };

    update();
    mediaQuery.addEventListener('change', update);
    // 销毁时移除监听，避免内存泄漏
    el._sizeUpdateFn = update;
    el._sizeQuery = mediaQuery;
  },
  unmounted(el) {
    el._sizeQuery.removeEventListener('change', el._sizeUpdateFn);
  }
});

使用时只需给组件加指令：

<some-element v-responsive-size="{ query: '(max-width: 600px)' }"></some-element>

方案2：CSS变量配合JS同步（规则统一） #

先在SCSS中通过媒体查询定义全局CSS变量，再用JS读取变量值同步到组件属性，确保样式和组件属性的规则完全一致：

SCSS代码：

:root {
  --component-size: 'large';
}

@media (max-width: 767px) {
  :root {
    --component-size: 'small';
  }
}

JS代码：

function syncSizeFromCSS() {
  const rootStyle = getComputedStyle(document.documentElement);
  // 读取变量并去掉引号
  const size = rootStyle.getPropertyValue('--component-size').trim().replace(/['"]/g, '');
  document.querySelectorAll('some-element').forEach(el => {
    el.setAttribute('size', size);
  });
}

// 初始化+监听窗口大小变化
syncSizeFromCSS();
window.addEventListener('resize', syncSizeFromCSS);

方案3：封装通用组件（最优复用方案） #

如果多处使用<some-element>，直接封装一个自己的响应式组件，把尺寸逻辑藏在内部，对外完全兼容原组件的所有属性和事件，彻底避免代码重复：

以Vue为例，封装ResponsiveSomeElement.vue：

<template>
  <some-element 
    :size="currentSize"
    v-bind="$attrs"
    v-on="$listeners"
  ></some-element>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const currentSize = ref('large');
const mediaQuery = window.matchMedia('(max-width: 767px)');

const updateSize = () => {
  currentSize.value = mediaQuery.matches ? 'small' : 'large';
};

onMounted(() => {
  updateSize();
  mediaQuery.addEventListener('change', updateSize);
});

onUnmounted(() => {
  mediaQuery.removeEventListener('change', updateSize);
});
</script>

使用时直接替换原组件即可，原有的属性、事件都能正常使用：

<responsive-some-element 
  :custom-prop="yourValue"
  @custom-event="handleEvent"
></responsive-some-element>

注意事项 #

• 优先选择封装组件的方案，后续修改尺寸规则只需改一处，维护成本最低；
• matchMedia比resize事件更高效，避免频繁触发逻辑；
• React可以用useMediaQuery Hook（或自行实现），封装成高阶组件或自定义组件，逻辑和Vue版本一致。

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