Question

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

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

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

有没有办法可以使用除屏幕宽度以外的媒体查询选择器，而是使用元素的宽度...或类似的东西？或者可以通过javascript实现另一种模仿行为的方法..

Answer 1

不幸的是，媒体查询目前没有办法以div为目标。媒体查询只能定位到屏幕，即浏览器窗口，移动设备屏幕，电视屏幕等......

Answer 2

更新（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并不总是设置页面宽度的百分比。