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

【问题标题】：Media Query-like behaviour on width of a specific div特定 div 宽度上的类似媒体查询的行为
【发布时间】：2011-11-08 11:11:20
【问题描述】：

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

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

我在事物的视图方面进行了一些媒体查询，并意识到在预览页面上，@media screen and (max-width: 640px) 之类的行为会有所不同，因为预览不会占据整个屏幕宽度。

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

【问题讨论】：

听起来像是一个有用的 Javascript 项目，不幸的是我没有时间研究解决方案 atm。
@PJBrunet 现在有一些解决方案：github.com/eqcss/eqcss 是一个主要的
这可能会对某人有所帮助，但使用 jQuery 来做这件事会很容易，比如 if ($( "div" ).width() > x) { // change div to desktop class } else // mobile class

【解决方案1】：

更新（2018 年）：

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

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

目前我正在使用：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：