Css 在使用媒体查询调整窗口大小时在语义ui中更改或添加类名

是否有任何方法可以使用媒体查询来更改语义UI中网格容器的类，或者解决方案是否在于编写自己的Javascript来向HTML添加或删除类

我意识到我没有正确地表达这个问题，所以我将对它进行更新以反映这一点。就语义用户界面而言，这正是关于媒体查询与JavaScript的关系

我的问题是：假设我有一个可堆叠的网格容器，其中有两列，分别有类.four.wide.column和.12wide.column。默认情况下，当浏览器的窗口大小为1000px时，列中的文本将左对齐。但是，当窗口调整到767 px的较小移动大小时，我想将列内的文本居中对齐

起初，我想重新排列媒体查询列中的文本，但我突然想到，这会破坏语义UI的用途，因为使用此解决方案，类名的外观或行为将与所描述的不同。通常左对齐的列现在是居中对齐的，但该类不称为居中对齐。如果类是中心对齐的，现在是左对齐的，但名称相同，会发生什么情况

---

然后我想知道是否可以使用媒体查询添加和删除类，但这似乎不可能。我发现保留语义UI的一个解决方案是使用JavaScript添加和删除类，但我希望避免使用JavaScript作为解决方案。

这取决于您希望触发文本对齐更改的具体内容。如果希望在特定视口宽度处更改对齐方式，我建议使用css

@media

查询，而不是调整侦听器的大小。对于窗口大小调整，您还需要对调整大小事件进行去抖动或节流，以提高性能。取决于你怎么做，你可能会经历一个瞬间的意外对齐。您不必通过媒体查询来实现这一点，更改将立即进行

.ui.grid .column {
  text-align: left;
}

@media only screen and (max-width: 600px) {
  .ui.grid .column {
    text-align: right;
  }
}

---

谢谢你的回复，但我更新了我的问题，以澄清我的意思。我没有问我真正想问的问题。