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

2023-11-26

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

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

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

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


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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

特定 div 宽度上类似媒体查询的行为 的相关文章

  • 适用于所有浏览器的 Center HTML 5 音频播放器

    我尝试过这样的代码 div style margin 0 auto div
  • 带有 selectInputs 的 DT 数据表在选择后重置回左侧

    我在 Shiny 应用程序的 DT 数据表的列中使用 selectInputs 感谢一些帮助here https stackoverflow com questions 74620665 vertically center selectin
  • 在画布中心写入 (0,0)-HTML5

    I m currently developing a drawing app which allows the user to click and drag to determine the size of the shape and al
  • 如何使用 Flex 创建自定义马赛克

    我正在尝试使用 Flex 创建一个自定义马赛克 如下所示 除了框 4 的高度和宽度加倍之外 所有框的宽度都是父容器的三分之一 我设法达到以下条件 push group element ul push group element ul li
  • html/js 中从右到左和/或从上到下的文本?

    如何在浏览器中为用户输入创建从右到左和从上到下的文本字段 有没有本地方法可以做到这一点 或者也许有解决方法 从上到下可能像日语或象形文字 对于 RTL 文本字段 您可以使用 HTMLdir属性 如 ime Vidas 已经提到的 或 wit
  • Bootstrap 面板主体,内有表格

    我有一个引导面板 单击图标即可折叠并自动关闭 该面板内部包含一个全宽的表格 但只有在没有任何内容时才看起来像这样panel body 例如 这张桌子横跨面板的整个宽度和高度 看起来不错 但如果我可以有一个围绕桌子的类 我会更喜欢 但是 如果
  • 如何在流体宽度表中使用省略号而不使每列大小相同?

    假设我的表中的列是id name description and phone The description列的长度为 1 255 个字符 但 id 最多只有 3 个字符 我希望列的大小适当 而不是每列的大小相同 我想要descriptio
  • html2canvas z-index 不起作用

    我正在使用 html2canvas 库将 div 转换为 png 我有一个关于z index 正如你在图片上看到的 我有盒子 在一个盒子里我有一个用于背景着色的 div z index 0 它随着高度值和数字的 div z index 1
  • 带有蓝图 css 的 HTML5 样板

    我正在考虑将这两种技术结合起来用于一个新项目 这是坏主意吗 有没有推荐的替代网格系统与 html5 样板一起使用 实际上 我将它们混合在一起并且它们一起工作得很好 http shikiryu com html5 我所要做的就是修改 div
  • Jekyll 液体变量作为内联 CSS 值

    将液体变量作为内联样式传递通常会令人皱眉吗 这是我的标记的示例 div class span 8 12 h6 page role h6 h1 style color 000000 page title h1 div
  • Chrome - 儿童剪辑CSS3圆形边框?

    请参阅以下 JSFiddle http jsfiddle net zScKW http jsfiddle net zScKW 请注意 子 div 剪裁了其父 div 的边框 如果我删除边框 但保留圆角 该项目将按照我们的预期进行剪辑 Fir
  • 为什么 Bootstrap 按钮下拉菜单在 iOS 上不起作用?

    看起来甚至连引导演示在这里 http twitter github com bootstrap components html buttonDropdowns不适用于 iOS 您似乎无法在 iPhone 或 iPad 上从中选择项目 有解决
  • CSS水平导航间距

    我正在尝试用 css 创建一个水平导航栏 其中包含 5 个均匀间隔的链接 html 希望保持这样 div ul li a href one html One a li li a href two html Two a li li a hre
  • Firefox 浮动错误?如何让我的 float:right 在同一条线上?

    我有以下小提琴 http jsfiddle net q05n5v4c 2 http jsfiddle net q05n5v4c 2 在 Chrome 中 它渲染得很好 V 形标志位于右侧 然而 在 Firefox 中 Chevron 字形下
  • 使用 CSS flexbox 重叠两个居中元素

    我试图将两个元素绝对居中于页面中间 一个元素在另一个元素后面 目的是让页面完全响应 中间有一个圆圈 后面有一个脉冲效果 这是一个小提琴 http jsfiddle net Fy8vD 2003 以下的 html body height 10
  • 如何使 :focus, :active 与 :hover 相同

    有没有简单的方法使 focus 和 active 表现得像 hover 通常我写 class a hover class a active class a focus 但我只想写一个 hover 规则 并且 focus active 看起来
  • 右侧对齐不浮动

    我有一个聊天小部件 我正在向其中添加一些样式 但是 我很难使 用户 聊天气泡与屏幕右侧对齐 当我使用向右浮动和向左浮动 另一侧 时 div 不再正确定位 因为它们似乎只是转到相对 div 的右侧 我希望它也能够附加 div 这将导致溢出 y
  • 样式选项标签[重复]

    这个问题在这里已经有答案了 我有一个包含选项的下拉菜单 我想部分地打破和粗体一些文本以及插入上下文中断 我尝试使用 CSS 和 HTML 标签 但无法得到它 有人可以建议一个解决方案吗 提前致谢 我知道这个问题有点老了 或者至少不是新的 但
  • 删除移动设备上的 adsense

    我正在研究响应式设计 但在使用 adsense 时遇到了问题 我有一个广告应该显示在桌面设计上 但不能显示在移动设计上 因此 只有在桌面上查看网站时 才应将广告代码放置在 html 中 css 可以使用 display none 但这违反了
  • CSS 悬停+背景图片

    我正在使用 HTML CSS 创建一个特殊的 UI 控件来模仿 Windows 7 控制面板按钮 到目前为止 我已经完成了正确的布局 现在我想为其添加一些修饰 如图所示 当您将鼠标悬停在按钮上时 会出现渐变 http m cncfps co

随机推荐