特定 div 宽度上的类似媒体查询的行为

Question

我正在构建一个编辑器，其中帖子的内容加载到 div 中，并且 jQuery 选择器允许我内联编辑内容。

当我试图为模板的样式添加一些响应能力时，我遇到了一些障碍：在我的模板样式表中，我使用预览区域的特定 ID 来指定样式应应用的位置。我将相同的 ID 应用于帖子查看的正文标记，以便编辑器中的预览和帖子的完整视图看起来相同。

我在视图端添加了一些媒体查询，并意识到在预览页面上，类似

@media screen and (max-width: 640px)

的行为会有所不同，因为预览不会占据屏幕的整个宽度。

有没有办法可以使用媒体查询选择器而不是屏幕宽度，而是元素的宽度..或等效的东西？或者是否有另一种方法可以简单地使用 javascript 来模仿该行为..

Answer 1

不幸的是，目前还没有一种方法可以让媒体查询定位到 div。媒体查询只能针对屏幕，即浏览器窗口、移动设备屏幕、电视屏幕等......

Answer 2

更新（2018）：

这仍然是许多开发者的普遍问题。没有 javascript 就无法查询元素的大小。由于它导致的“循环依赖”，它在 CSS 中实现起来也非常困难（元素依赖于另一个元素来确定其大小，元素查询导致子元素的大小变化，从而导致父元素的大小变化，从而导致子元素的大小变化等等...... )

如今的首选解决方案是 EQCss 库 https://github.com/eqcss/eqcss，或者使用“CSSinJS”类型解决方案处理 React 或 Vue 等 JavaScript 框架中的更改。

目前我正在使用：

.preview {
    zoom: .8; 
    -moz-transform: scale(0.8);}

当 .preview div 为页面宽度的 80% 时。它通常可以工作，但有一些问题，并且它并不完全灵活，因为有问题的 div 并不总是设置为页面宽度的 %。

Answer 3

截至 2023 年 2 月，支持容器查询。