特定 div 宽度上的类似媒体查询的行为 [英] Media Query-like behaviour on width of a specific div

问题描述

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

I'm building an editor where the content of a post is loaded in a div, and jQuery selectors allow me to edit the content inline.

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

I just ran into a bit of a hurdle as I was trying to add some responsiveness to the styling of the templates: in my template stylesheets, I use a specific id of the preview area to specify where the style should apply. I apply the same id to the body tag of the viewing of the post so that both the preview in the editor and the full view of the post look the same.

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

I was putting in some media queries on the view side of things and realized that on the preview page, something like @media screen and (max-width: 640px) will behave differently because the preview does not take up the entire width of the screen.

有没有一种方法可以使用除屏幕宽度以外的媒体查询选择器，而是使用元素的宽度……或其他类似的东西?或者是否有另一种方法可以简单地使用 javascript 模仿该行为..

Is there a way I can use a media query selector other than the width of the screen, but instead the width of an element.. or something equivalent? Or could there be another way of mimicking that behaviour simply with javascript..

推荐答案

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

Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...

这篇关于特定 div 宽度上的类似媒体查询的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！