响应式布局中列宽超过400px时如何设置CSS样式？

你需要的是不依赖视口宽度、基于元素自身尺寸触发的响应式规则，CSS原生的容器查询（Container Queries） 完全适配该场景，无需提前知道一行的列数，适配WordPress管理员自定义列数的需求。

实现步骤 #

• 给列容器添加容器属性，将其标记为可被查询的容器

/* 以下类名匹配WordPress默认列区块的类，可根据你实际的列类名调整 */
.wp-block-column {
  container-type: inline-size;
  container-name: post-column; /* 可选，用于区分不同容器，避免样式冲突 */
}

• 编写容器查询规则，匹配列宽≥400px的场景

@container post-column (min-width: 400px) {
  /* 这里写对应场景下的样式，选择器为列内部的元素 */
  .wp-block-column p {
    font-size: 1.25rem;
  }
  .wp-block-column h3 {
    font-size: 1.75rem;
  }
  /* 其他需要调整的元素样式均可写在此处 */
}

兼容性兜底方案 #

容器查询已兼容所有主流现代浏览器（Chrome 105+、Firefox 110+、Safari 16+），覆盖95%以上全球用户。如果需要兼容更低版本浏览器，可使用ResizeObserver做降级处理：

const columns = document.querySelectorAll('.wp-block-column')
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    entry.target.classList.toggle('column--wide', entry.contentRect.width >= 400)
  })
})
columns.forEach(col => resizeObserver.observe(col))

配套CSS样式：

.column--wide p {
  font-size: 1.25rem;
}
.column--wide h3 {
  font-size: 1.75rem;
}

以上方案不管后台设置一行显示多少列，只要列本身的宽度超过400px就会自动触发大字号样式，无需额外调整代码。

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