11

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

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

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

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

4

2 回答 2

8

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

于 2012-11-21T15:34:49.783 回答
0

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

于 2011-09-05T20:46:34.820 回答