CSS纯实现动态条件值：随重绘触发的属性判断可行吗？

当然可以实现！CSS里没有像编程语言那样直白的if/else语法，但我们可以用专门的特性来达成这种“根据元素动态尺寸切换属性”的效果，而且完全纯CSS，能跟着每次重绘（比如窗口缩放、父元素布局变化）自动更新判断结果。

最推荐的方案：CSS容器查询（Container Queries） #

这是目前针对元素自身尺寸做条件判断的最佳方案，专门为这类场景设计，能精准监听元素所在容器（甚至元素自身）的尺寸变化，每次重绘都会重新校验条件并应用样式。

针对你给出的示例，我们可以这么写：

/* 首先给目标元素定义容器查询上下文，让它能监听自身的宽度变化 */
.elem {
  container-type: inline-size; /* 监听内联方向的尺寸（这里就是宽度） */
  width: 20%;
  text-orientation: inherit; /* 默认属性值 */
}

/* 当元素自身宽度小于100px时，覆盖text-orientation属性 */
@container (width < 100px) {
  .elem {
    text-orientation: upright;
  }
}

原理说明： #

• container-type: inline-size 会把.elem自身标记为一个容器查询的上下文，让后续的@container规则能基于它的宽度做判断。
• @container (width < 100px) 是条件判断规则，只要元素宽度小于100px，就会应用大括号里的样式；一旦宽度变化超过阈值，样式会自动切换回去，完全不需要JS介入。

其他备选方案（局限性较大） #

媒体查询（Media Queries） #

如果你的元素尺寸完全由视口尺寸决定（比如width: 20vw），可以用媒体查询实现，但它只能监听视口尺寸，无法响应元素自身或父元素的布局变化（比如父元素被其他元素挤压变窄），所以适用性很有限：

.elem {
  width: 20%;
  text-orientation: inherit;
}

/* 当视口宽度小于500px时（因为20%的视口宽度就是100px），切换属性 */
@media (max-width: 500px) {
  .elem {
    text-orientation: upright;
  }
}

数学函数（仅适用于数值型属性） #

像clamp()、calc()这类函数可以实现数值的动态调整，但它们只针对数值型属性（比如宽度、字体大小），像text-orientation这种离散的枚举属性就完全用不上，所以对你的示例不适用，但可以提一下拓展思路：

/* 示例：宽度在100px到200px之间动态变化 */
.elem {
  width: clamp(100px, 20%, 200px);
}

总结 #

如果要实现随元素自身尺寸变化、每次重绘自动触发的条件属性切换，CSS容器查询是最直接、最精准的方案，完全满足你的需求。目前主流浏览器（Chrome、Firefox、Safari 16.4+）都已经支持这个特性，兼容性问题不大。

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