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

【问题标题】：Can I force an html element to render a certain media size?我可以强制 html 元素呈现特定的媒体大小吗？
【发布时间】：2015-01-25 06:59:17
【问题描述】：

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

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

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

【问题讨论】：

如果该选项存在，那就太好了。现在没有基于选择器的媒体查询。人们要以给定大小进行渲染，就是在页面内粘贴该大小的 iframe。这可能无法满足您的需求。如果模板的 CSS 是移动优先的，您可能只需要复制 min-widths 之前的 css。
您只需将所需的代码复制到单独的样式表中。告诉正文使用某个媒体查询会破坏媒体查询的目的——它不会查询任何内容。

【解决方案1】：

我要做的是将一个新的 className 添加到您想要服从媒体查询的模板版本中。然后将您的媒体查询 CSS 更改为仅针对具有该新类名的元素。

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

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

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

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

然后将您的媒体查询更改为仅定位同样具有.module-a-fluid 的.module-as。

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

【讨论】：