媒体类似于特定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屋！