如何实现大屏环境下仅指定容器内元素应用小屏媒体查询样式？

现有包含屏幕尺寸检测的媒体查询代码如下：

@media screen and (max-width: 840px) {
  ...some styles for smaller screens
}
@media screen and (min-width: 841px) {
  ...some styles for bigger screens
}

需求是：仅当目标元素处于特定容器外时，大屏（屏幕宽度≥841px）环境下应用大屏样式；处于特定容器内时，大屏环境下仍保留小屏样式。

首次尝试的写法如下，但实际无论容器是否存在，大屏样式都未生效：

@media screen and (max-width: 840px) {
  ...some styles for smaller screens
}
@media screen and (min-width: 841px) {
  @container not my-container {
     ...some styles for bigger screens
  }
}

这个需求是可以实现的，你的写法存在两处核心问题：

1. 容器查询语法错误：@container not my-container的写法不规范，必须先给目标容器定义container-name和container-type，容器查询才能生效。
2. 优先级逻辑不成立：大屏环境下，小屏媒体查询（max-width:840px）本身不会触发，所以容器内元素并不会保留小屏样式，反而会因未匹配到大屏样式而使用默认样式。

正确实现步骤 #

1. 先给目标容器设置容器属性

.my-container {
  /* 定义容器名称 */
  container-name: my-container;
  /* 指定容器的尺寸类型，这里用inline-size对应宽度维度 */
  container-type: inline-size;
}

2. 调整媒体查询的样式逻辑

大屏环境下，先给所有目标元素应用小屏样式，再给容器外的元素覆盖为大屏样式：

/* 小屏样式：屏幕宽度≤840px时全局生效 */
@media screen and (max-width: 840px) {
  .target-element {
    /* 小屏样式代码 */
    padding: 1rem;
    font-size: 14px;
  }
}

/* 大屏环境：屏幕宽度≥841px时 */
@media screen and (min-width: 841px) {
  /* 先给所有目标元素应用小屏样式 */
  .target-element {
    padding: 1rem;
    font-size: 14px;
  }

  /* 仅给容器外的目标元素覆盖大屏样式 */
  @container not my-container {
    .target-element {
      /* 大屏样式代码，覆盖小屏样式 */
      padding: 2rem;
      font-size: 16px;
    }
  }
}

3. 可选：用CSS变量复用样式（简化代码）

避免重复写小屏样式，可以用CSS变量封装：

:root {
  --small-screen-styles: {
    padding: 1rem;
    font-size: 14px;
  };
}

.my-container {
  container-name: my-container;
  container-type: inline-size;
}

@media screen and (max-width: 840px) {
  .target-element {
    @apply var(--small-screen-styles);
  }
}

@media screen and (min-width: 841px) {
  .target-element {
    @apply var(--small-screen-styles);
  }

  @container not my-container {
    .target-element {
      padding: 2rem;
      font-size: 16px;
    }
  }
}

关键注意点 #

• 容器查询需要浏览器支持，目前Chrome 105+、Firefox 110+、Safari 16+等主流浏览器已兼容。
• 必须确保container-name和container-type正确绑定到目标容器上，否则@container规则无法匹配。

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