CSS - Chrome 扩展弹出窗口中的媒体查询答案

【问题标题】：CSS - Media Queries in a Chrome Extension PopupCSS - Chrome 扩展弹出窗口中的媒体查询
【发布时间】：2014-10-20 04:02:47
【问题描述】：

如何正确地对 Chrome 窗口的宽度进行媒体查询？甚至可以在 Chrome 扩展程序中正确进行媒体查询吗？
现在，我的媒体查询作用于扩展视口的宽度，而不是实际浏览器的视口（并且扩展的视口可以大于浏览器的视口）。在普通的 Web 应用中，视口宽度始终等于浏览器的视口，但对于扩展程序来说似乎并不相同

似乎有一种方法可以通过设置“html”标签的宽度来使用 JavaScript 来做到这一点，但是如果有一个纯 CSS 方式会更好

（这是用于带有弹出 UI 的浏览器操作扩展）

【问题讨论】：

什么样的扩展？扩展甚至不必有 UI。带有视口（比浏览器窗口大）的页面在哪里？
浏览器操作可以有一个 UI，它是扩展 developer.chrome.com/extensions/browserAction 的弹出窗口
啊。你应该提到这一点。这只是 chrome 扩展工具包的一小部分。唯一我一无所知的部分，恐怕 =) 祝你好运
是的，你一提到它就这样做了。鉴于我在谈论 UI，我认为这很明显。无论如何谢谢:)
是的，不清楚你在问什么。你在哪个页面查询？在弹出窗口中，您想要父窗口的尺寸？这在 JS 中肯定是可能的，在 CSS 中肯定是不可能的（因为 CSS 只会看到弹出窗口自己的尺寸）

【解决方案1】：

至少在浏览器动作弹出窗口中，用纯 CSS 查询父窗口的宽度是不可能的。正如我所想和 @Xan 在 cmets 中确认的那样，JavaScript 是获取父窗口宽度所必需的。

可以在此处找到使用 JavaScript 执行此操作的方法：How to get notified on window resize in chrome browser。请注意，这确实需要内容脚本，因为 chrome.window.onResized 自 2010 年以来仍然是一个悬而未决的问题

【讨论】：