我有一个在我网站的页面上使用的 html 模板(MeteorJS 模板)。我想在另一个页面上重用该模板,但我想呈现模板的移动版本,因为它将充当小部件而不是完整模板(这就是我想要移动版本的原因)。
我想在不必覆盖所有媒体查询的情况下执行此操作。
有没有办法告诉一个元素渲染它的所有子元素,就像它是特定的媒体大小一样?
最佳答案
我要做的是将新的类名添加到您确实希望遵守媒体查询的模板版本。然后将您的媒体查询 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 {
...
}
}
关于html - 我可以强制 html 元素呈现特定的媒体大小吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27157794/