让一个div元素“认为”屏幕宽度是固定的？

Question

想知道是否有方法让元素认为视口是特定宽度？

这将用于测试响应式CSS实用程序。例如，此CSS组件是响应式的，但要查看其行为，用户必须缩小浏览器窗口。

如果有一种“欺骗”标记测试元素以认为视口是特定宽度的方法，则不需要手动拖动浏览器窗口。

一个可能性，尽管我怀疑它已被实现，就是浏览器开发工具公开API，允许我们选择并通知浏览器某些元素应认为浏览器在特定视口大小下呈现...

一个方法

当对此测试进行试验时，我无意中发现了一种在没有开发者工具的情况下触发媒体查询的方法，即使用ctrl +放大视口。 这将触发媒体查询，尽管显然不具有我正在寻找的声明性精度。

- Ole

---

我正在尝试避免在开发者工具中操纵视图大小。例如，有一个响应式实用程序u-sm-padding-2rem可以设置填充，但仅当视口较小时才能生效，这样测试就可以显示出来，而无需开发人员模拟开发者工具内部的小视口。 - Ole

这是一些布局测试的示例。我还没有构建响应式布局，因为需要“调整视口大小”的要求，如果现在包含它们，观看者将不得不手动设置视口大小（通过开发工具），以查看测试是否正确执行：https://superflycss.github.io/utilities-layout/target/test/html/ - Ole

所以这个问题要求反向媒体查询。不是根据视口大小触发CSS，而是让浏览器相信视口对于某个元素是特定的大小，从而触发媒体查询。 - Ole

@Ole，是的，这是可能的，而且实现起来非常简单。更复杂的部分是解释CSS的工作原理，因为你目前对它的理解有些偏差。我并不是在批评你，我们在学习之前都不懂CSS。 - tao

@ObsidianAge 如果你看一下这个测试 https://superflycss.github.io/component-navbox/target/test/html/ 你会注意到在不同的视口大小下，组件的渲染会发生变化，这取决于附加到组件的什么类型的修饰符 --sm, --md, --large。但是触发媒体查询的视口大小必须改变。理想情况下，我们可以将组件放在一个“认为”视口处于某个特定大小的元素内，这样它就会呈现出当视口实际具有该大小时呈现组件的方式。 - Ole

Answer 1

将其放入<iframe>中。此标签创建一个新的窗口上下文，其中媒体查询与之比较的宽度。可以操纵iframe宽度以模拟不同的设备宽度，例如：https://codepen.io/anon/pen/jJNyJd。Material Design调整大小测试器使用<iframe>在浏览器内模拟不同大小的屏幕：https://material.io/tools/resizer/。据我所知，这是实现这一目标的唯一方法。

- leepowers