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

标签 css google-chrome-extension media-queries browser-extension

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

似乎有一种方法可以通过设置“html”标签的宽度来使用 JavaScript 来实现这一点,但是如果有一种纯 CSS 方法会更可取

(这是用于带有弹出式 UI 的浏览器操作扩展)

最佳答案

至少在浏览器action popup中,纯CSS是不可能查询到父窗口的宽度的。正如我所想并且@Xan 在评论中确认的那样,JavaScript 是获取父窗口宽度所必需的。

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

关于CSS - Chrome 扩展弹出窗口中的媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26445989/

相关文章:

javascript - 在 MaterializeCss Toast 中添加 Material 图标?

html - 如何设置包含的 div 之间的空间?

css - 打印 css,仅在打印时加载图像

css - Yahoo Pure CSS 中的媒体查询

html - 如何去掉浏览器默认设置的省略号?

javascript - 第二个模式按钮不起作用

authentication - 使用 chrome WebSockets 时如何传递额外的 cookie?

google-chrome - 以编程方式安装 Chrome 扩展

google-chrome - 使用 ECMAScript 6

css - 覆盖媒体查询中的重要规则集? !不重要?