Html 在手机和桌面上为同一个div提供不同的样式

我在内容正文中有一个

部分，里面有一个

，如下所示：

<div class="hub_specification">
example html table
</div>

示例html表

对于桌面视图，我想用50%的内容区域宽度，向左浮动显示这个

对于移动视图，我想用100%的内容区域宽度，不带任何浮动来显示这个

那么，装饰轮毂规范的CSS代码是什么呢

---

如果这两种方式都存在的话会更好：CSS用于WordPress和inline中名为

style.CSS

的文件。

如果我没有错，您想要这个吗
HTML

<div class="hub_specification">
example html table
</div>

---

如果我没有错，你想要这个吗
HTML

<div class="hub_specification">
example html table
</div>

---

使用CSS

媒体查询

.hub_specification{
    background-color: lightgreen;
}

@media screen and (max-width: 480px) {
    .hub_specification {
        background-color: lightblue;
    }

}

---

参考资料：

使用CSS

媒体查询

.hub_specification{
    background-color: lightgreen;
}

@media screen and (max-width: 480px) {
    .hub_specification {
        background-color: lightblue;
    }

}

<>：

你应该真正考虑并利用它的网格系统和媒体特定类。我敢肯定，如果你在一个自适应网站上工作，这不是你需要解决的最后一个问题，而且框架已经把大部分的事情都解决了。你应该真正地考虑和利用它的网格系统和媒体特定的类。我敢肯定，如果你正在开发一个自适应网站，这远不是你需要解决的最后一个问题，而且这个框架已经解决了大部分问题。