窗口缩放时，能否用媒体查询修改Semantic UI类名？或需用JS实现？

嘿，我来帮你搞定这个问题～首先明确一点：CSS媒体查询没办法直接添加或移除HTML元素的类名，这是CSS的功能限制，它只能基于屏幕条件修改元素样式，没法操作DOM的类属性。不过你完全不用被迫写JavaScript，有更简单的适配方案：

方案1：用Semantic UI自带的响应式文本对齐类（最推荐） #

Semantic UI本身就提供了带断点前缀的响应式工具类，完美适配你的需求，完全符合它的设计初衷。你只需要在列元素上同时添加默认的左对齐类和移动端的居中对齐类：

<div class="four wide column text-left mobile-text-center">你的文本内容</div>
<div class="twelve wide column text-left mobile-text-center">你的文本内容</div>

这里的mobile-text-center会自动在屏幕宽度≤767px时生效，把文本改成居中对齐；而默认的text-left会在大于767px的屏幕上保持左对齐。不需要额外写CSS或JS，完全遵循框架的语义设计。

方案2：自定义媒体查询覆盖样式（适合灵活定制场景） #

如果你因为特殊需求不想用官方工具类，也可以直接写媒体查询覆盖样式——这其实不算违背设计初衷，框架的类是用来定义基础结构，你完全可以根据业务需求在特定断点调整表现：

/* 给网格父容器加自定义类，提高选择器优先级，避免用!important */
.custom-grid-wrapper .four.wide.column,
.custom-grid-wrapper .twelve.wide.column {
  text-align: left;
}

@media only screen and (max-width: 767px) {
  .custom-grid-wrapper .four.wide.column,
  .custom-grid-wrapper .twelve.wide.column {
    text-align: center;
  }
}

给网格的父容器加一个自定义类custom-grid-wrapper，这样你的选择器优先级会高于Semantic UI的基础样式，不需要用!important强制覆盖，既满足需求又保持样式干净。

总结一下：完全不需要用JavaScript，上面两种方案都能解决你的问题，优先推荐方案1，最贴合Semantic UI的设计思路。

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