SvelteKit中如何将媒体查询参数作为组件属性传递？

1. 动态生成媒体查询（JavaScript） #

通过JS读取组件属性，动态创建样式规则插入页面，完全支持自定义断点，兼容性拉满。

示例代码：

<!-- 用data属性传递自定义断点 -->
<div class="hamburger-menu" data-breakpoint="1200px"></div>

<script>
const menu = document.querySelector('.hamburger-menu');
const breakpoint = menu.dataset.breakpoint || '1200px';

// 创建并插入样式标签
const styleTag = document.createElement('style');
styleTag.textContent = `
  .hamburger-menu {
    display: none;
  }
  @media screen and (max-width: ${breakpoint}) {
    .hamburger-menu {
      display: unset;
    }
  }
`;
document.head.appendChild(styleTag);
</script>

如果是React/Vue这类框架组件，可以在挂载钩子中执行类似逻辑，或者利用框架的样式绑定能力实现。

2. 使用CSS预处理器变量（Sass/Less） #

如果项目用了预处理器，可以把断点作为变量传入组件样式，编译时生成对应媒体查询。

以Sass为例：

// 定义可复用的混合宏，接收断点参数
@mixin hamburger-menu($breakpoint: 1200px) {
  .hamburger-menu {
    display: none;
    @media screen and (max-width: $breakpoint) {
      display: unset;
    }
  }
}

// 使用时传入自定义断点
@include hamburger-menu(992px);

框架组件中可以通过动态导入或样式参数传递的方式，将自定义断点注入预处理器变量。

3. 利用CSS容器查询 #

如果能把视口尺寸转化为容器尺寸（比如将<body>或根容器设为查询容器），可以用容器查询结合自定义属性实现：

/* 把根元素设为容器查询的载体 */
:root {
  container-type: inline-size;
  --breakpoint: 1200px;
}

.hamburger-menu {
  display: none;
}

/* 当容器宽度小于等于设定断点时显示菜单 */
@container (max-width: var(--breakpoint)) {
  .hamburger-menu {
    display: unset;
  }
}

然后通过内联样式修改自定义属性，实现断点传递：

<div style="--breakpoint: 992px;" class="page-container">
  <div class="hamburger-menu"></div>
</div>

注意：容器查询需现代浏览器支持，目前主流浏览器已普遍兼容。

4. 内联样式+CSS变量降级方案 #

如果只需要简单控制，可通过内联样式默认隐藏菜单，再用媒体查询覆盖，同时结合CSS变量传递断点：

<div class="hamburger-menu" style="display: none;"></div>

<style>
/* 用CSS变量作为断点，默认值1200px */
@media screen and (max-width: var(--breakpoint, 1200px)) {
  .hamburger-menu {
    display: unset !important;
  }
}
</style>

<script>
// 动态修改全局CSS变量
document.documentElement.style.setProperty('--breakpoint', '992px');
</script>

注意：部分旧浏览器不支持媒体查询中使用CSS变量，需做好兼容性判断。

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