好奇是否有一种方法可以使元素认为视口具有一定宽度？
这将用于测试响应式CSS实用程序。例如，此CSS component is responsive，但是要查看行为，用户必须缩小浏览器窗口。
如果有一种方法可以“诱骗”标记测试元素，使其认为视口是一定的宽度，则无需手动拖动浏览器窗口。
尽管我怀疑它是否已实现，但一种可能性是使浏览器开发人员工具公开一个API，该API允许我们选择并通知浏览器某些元素应考虑以某个视口大小呈现该浏览器... < / p>
在摆弄this test的同时，我偶然发现了一种无需开发人员工具即可触发媒体查询的方法，那就是使用ctrl +缩放视口。这将触发媒体查询，尽管显然不是我正在寻找的声明性精度。
答案 0 :(得分：1)
将其放入<iframe>中。此标记创建一个新的窗口上下文，将其与媒体查询的宽度进行比较。通过以下示例，可以操纵iframe宽度以模拟不同的设备宽度：
https://codepen.io/anon/pen/jJNyJd
Material Design尺寸调整器测试仪使用<iframe>来模拟浏览器中的不同屏幕尺寸：
https://material.io/tools/resizer/
据我所知，这是完成此任务的唯一方法。