html - 制作一个屏幕宽度一定的div元素 "think"？

Question

好奇有没有办法让元素认为视口(viewport)是一定宽度的？

这将用于测试响应式 CSS 实用程序。例如这个 CSS component is responsive ，但要查看用户必须缩小浏览器窗口的行为。

如果有一种方法可以“欺骗”标记测试元素，使其认为视口(viewport)具有特定宽度，则无需手动拖动浏览器窗口。

一种可能性，尽管我怀疑它是否已实现，是浏览器开发人员工具公开一个 API，允许我们选择并通知浏览器某些元素应该考虑浏览器以特定视口(viewport)大小呈现......

一种方式

一边摆弄this test我无意中发现有一种无需开发人员工具即可触发媒体查询的方法，那就是使用 ctrl + 缩放视口(viewport)。这将触发媒体查询，尽管显然没有我正在寻找的声明精确度。

Answer 1

把它放在 <iframe> 中.此标记创建一个新的窗口上下文，媒体查询的宽度将与之进行比较。根据这个例子，可以操纵 iframe 宽度来模拟不同的设备宽度:

https://codepen.io/anon/pen/jJNyJd

安<iframe> Material Design resizer 测试器使用它在浏览器中模拟不同的屏幕尺寸:

https://material.io/tools/resizer/

据我所知，这是实现此目标的唯一方法。