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

Question

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

我想这样做而不必覆盖所有媒体查询。

有没有办法告诉元素渲染它的所有子元素，就像它是某种媒体大小一样？

Answer 1

我要做的是将新的className添加到您想要遵守媒体查询的模板版本中。然后将您的媒体查询CSS更改为仅使用该新className定位元素。

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

.module-a {
    ...
}
.module-a-heading {
    ...
}

然后添加一个新的className，假设.module-a-fluid为您要关注媒体查询的.module-a个实例。

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

然后将您的媒体查询更改为仅定位.module-a的{​​{1}}。

.module-a-fluid