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

Question

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

我想在不必覆盖所有媒体查询的情况下执行此操作。

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

Answer 1

我要做的是将新的类名添加到您确实希望遵守媒体查询的模板版本。然后将您的媒体查询 CSS 更改为仅针对具有该新类名的元素。

假设您的基本 CSS(用于移动和小部件)是:

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

然后添加一个新的类名，假设 .module-a-fluid 到您要跟踪媒体查询的 .module-a 的实例。

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

然后将您的媒体查询更改为仅针对也具有 .module-a-fluid 的 .module-a。

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