我可以强制html元素呈现特定的媒体大小吗？

我有一个html模板（MeteorJS模板），我在我的网站页面上使用。我想在另一个页面上重用该模板，但我想呈现该模板的移动版本，因为它将充当小部件，而不是完整的模板（这就是我想要移动版本的原因）

我希望这样做而不必覆盖所有媒体查询

<div class="module-a module-a-fluid">
    <!-- ... -->
</div>

---

有没有一种方法可以告诉一个元素将其所有子元素呈现为一个特定的媒体大小？

我要做的是在模板的版本中添加一个新的类名，您确实希望遵守媒体查询。然后将媒体查询CSS更改为仅具有该新类名的目标元素

假设您的基本CSS（用于移动和小部件）是：

然后添加一个新的类名，比如说

.module-a-fluid

，添加到

.module-a

的实例中，您希望跟踪媒体查询

<div class="module-a module-a-fluid">
    <!-- ... -->
</div>

---

如果有这样的选择，那就太酷了。目前没有基于选择器的媒体查询。人们在给定大小的情况下渲染的是在页面中粘贴一个该大小的iframe。这可能不适合你的需要。如果模板的CSS是先移动的，您可能只需要在最小宽度之前复制CSS。您只需将所需的代码复制到单独的样式表中。告诉身体使用某个媒体查询会破坏媒体查询的目的——它不会查询任何东西。

@media (min-width: 768px) {
    .module-a.module-a-fluid {
        ...
    }
    .module-a-fluid .module-a-heading {
        ...
    }
}