媒体查询可以根据 div 元素而不是屏幕调整大小吗?

2023-11-23

我想使用媒体查询根据 a 的大小调整元素的大小div它们所在的元素。我不能使用屏幕尺寸作为div只是像网页中的小部件一样使用,其大小可能会有所不同。


是的,CSS 容器查询正是您所寻找的。这CSS 遏制模块是详细说明此功能的规范。您可以检查浏览器支持情况here.

您可以阅读更多有关decade工作,包括提案、概念验证、讨论和更广泛的 Web 开发者社区的其他贡献here!有关此类功能如何工作和使用的更多详细信息,请查看 Miriam Suzanne 的广泛的 解释者.


媒体查询并非设计为基于页面中的元素进行工作。它们被设计为基于设备或媒体类型(因此为什么他们被称为media查询)。width, height和其他基于尺寸的媒体功能均指基于屏幕的媒体中视口或设备屏幕的尺寸。它们不能用于引用页面上的某个元素。

如果您需要根据特定的尺寸应用样式div页面上的元素,您必须使用 JavaScript 来观察该元素大小的变化div元素而不是媒体查询。

或者,自从本答案最初发布以来引入了更现代的布局技术(例如 Flexbox)和标准(例如自定义属性),您可能根本不需要媒体或元素查询。Djave 提供了一个例子。

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

媒体查询可以根据 div 元素而不是屏幕调整大小吗? 的相关文章

  • 如何制作可扩展的文本框?

    我想制作一本以给定宽度 高度开始的教科书 然后 如果用户输入的内容超过给定的空间量 文本框就会向下扩展 我该怎么做呢 我使用 CSS 吗 当用户超过允许的行数时 基本文本框仅显示滚动条 如何使文本框将行数再扩展 5 行
  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好
  • 在纯 css3 循环中按顺序对元素进行动画处理

    我正在尝试在完整的 css3 动画中按顺序对元素进行动画处理 似乎非常直接的答案是使用动画延迟 但是我想要这个循环 有什么想法如何使动画无限循环吗 我找到了这个fiddle http jsfiddle net cherryflavourpe
  • 如何在 Quill(富文本编辑器)中检测和修剪前导/尾随空格?

    如何检测并删除前导 尾随空格Quill https quilljs com 哪个是富文本编辑器 例如 样本HTML下面代表Quill文本的输出 nHi 我们想要检测并删除由以下命令创建的每个文本块的前导和尾随空格Quill 不适用于整个文档
  • jquery - 如何根据我的滚动位置滚动顶部动画到下一个可见的 div/类?

    如果标题有点模糊 请原谅我 因为我不知道如何写下来 基本上 我们有一个包含 6 个 场景 的页面 他们都有班级 scene和不同的 ID 例如 scene1 scene2 etc 首先 我们必须动态更改每个场景的颜色 gt 场景 1 是浅色
  • HTML/CSS 水平导航子菜单悬停显示错误

    我正在创建一个带有水平导航和垂直子菜单的 HTML 页面 一切工作正常 除了子菜单上的悬停显示在实际菜单项的左侧 看我的jsfiddle https jsfiddle net qmcte349 https jsfiddle net qmct
  • 父元素的 mousedown 事件中的 offsetX 和 offsetY 错误

    我在 mousedown 上获取 offsetX 时遇到问题 下面是我的代码 div Click the text The mouseDown function is triggered when the mouse button is p
  • 如何使h1标签以其实际宽度居中

    我需要使 h1 标签居中 还需要在其周围制作边框 为了防止占用更多宽度 我给出display inline block但标签没有响应text align center then h1 text align center border 1px
  • 使整个网页着色

    How I can take any given webpage and make everything look tinted a certain color Basically if you take google and tint i
  • 如何在没有文本修饰的文本下方添加一行:下划线? [复制]

    这个问题在这里已经有答案了 我需要在文本下方添加一行 而不需要文本装饰 下划线 否则如何在文本和行之间创建自定义空间 我们所做的 您可以使用Border Bottom和一些Padding Bottom a border bottom 1px
  • 如何让 Twitter Bootstraps 移动导航栏覆盖页面上的内容而不是将其向下推?

    我正在使用 Twitter Bootstrap 并且想修改移动导航栏 以便在展开时下拉菜单覆盖页面上的内容 而不是将其向下推 我知道我可能需要制作包含 div 绝对定位 增加它的 z index 并定位外部 div 相对而言 但我似乎无法让
  • Javascript显示/隐藏div onclick

    我有一个页面 其中包含三个 div 每个 div 是一个段落 我想使用 javascript 在用户从导航栏中按下每个 div 时仅在页面中显示这是导航栏 https i stack imgur com 1LnsS png WebDev 只
  • 文本区域下的额外填充

    我的文本区域下面有额外的填充 但我似乎找不到它的来源 我已将单独的代码放在此页面上 http jsfiddle net wfuks http jsfiddle net wfuks 我似乎找不到它的来源 它有类 field field bac
  • CSS:仅背景不透明度,而不是内部文本[重复]

    这个问题在这里已经有答案了 我有这个注册表框 我真的很喜欢背景如何变得不透明 透明为 25 85 但后来我注意到文本和表单元素也变暗了一点 所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西 regForm z index 11
  • 使用过渡添加子项时 div 的平滑增长

    尽管使用了以下代码 但其行为并不符合我的预期transition所以可能有些事情我不明白 理想情况下 单击该按钮会将一个子项添加到id2div 并制作id1分区增长smoothly因此 function id1 button click g
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • Django 未在 404 页面上应用应用程序中的 CSS 文件

    姜戈3 0 8 Python 3 7 x 我有一个包含一些应用程序的 Django 项目 我正在尝试为 400 403 404 500 错误制作一些 默认 错误页面 我已经这样做了 并显示了适当的模板 但没有任何样式或 JS 在 404 错
  • 自动溢出的容器中不会出现滚动条(IE10、Windows Phone 8)

    我有一个容器 比方说div with overflow auto 其中的元素完全按照预期滚动 但不会出现典型的触摸滚动条 我尝试设置 ms overflow style auto明确地 但没有任何改变 浏览器 IE10 设备 Windows
  • Bootstrap下拉菜单文本颜色

    所以我第一次使用 Twitter 的 Bootstrap 我试图在下拉菜单折叠后更改其文本的颜色 如果有道理的话 I used 当您压缩网页以显示折叠菜单并转到下拉列表时 您会看到蓝色背景转移到下拉菜单项 但字体颜色为黑色 使其很难阅读 我
  • HTML 布局:向现有网站添加侧边栏

    我有一个网站 其正文如下所示 div div div div div div 这些中没有使用绝对 相对定位技巧divs 但是有很多floats clears margins and padding这些风格divs 及其内部元素 所有这些都会

随机推荐

  • 为什么 Objects.hash() 对于相同的输入返回不同的值?

    我运行了以下脚本 java 它给了我奇怪的结果 有谁可以帮忙解释一下吗 import java util Objects import org apache log4j Logger public class CacheTester pri
  • -D MACRO 和 #define MACRO 的优先级

    如果我有一个C文件 foo c 虽然我已经给出了 DMACRO 1作为编译的命令行选项 但是 如果在头文件中我也有 define MACRO 2 其中哪一个会优先 我正在假设您正在做什么 但是如果您想从命令行为该宏提供非默认值 请尝试对宏定
  • 多线程访问文件

    我们有一个多线程java程序 多个线程将写入一个文件 一个线程将从该文件中读取 我正在寻找一些设计想法 是否需要同步 文件通道理论上是线程安全的 来自javadoc 文件通道可供多个并发线程安全使用 这 close 方法可以随时调用 具体由
  • 读取套接字时Java中断线程[重复]

    这个问题在这里已经有答案了 可能的重复 如何立即终止阻塞在套接字IO操作上的线程 我有一个客户端在线程中运行 想要从 Java 中的套接字读取数据 但在阅读时 也许我想杀死线程 所以我interrupt它 但是套接字的读取方法会抛出异常吗I
  • 如何在 jQuery 中循环遍历数组?

    我正在尝试循环遍历一个数组 我有以下代码 var currnt image list 21 32 234 223 var substr currnt image list split array here 我正在尝试从数组中获取所有数据 有
  • C# - 捕获鼠标光标图像

    背景 我正在编写一个屏幕捕获应用程序 我的代码基于此项目 http www codeproject com KB cs DesktopCaptureWithMouse aspx display Print 请注意 代码还捕获了鼠标光标 这对
  • PHP iOS AES 加密

    我在尝试使用 AES 加密在 PHP 和我的 iOS 应用程序之间进行通信时遇到了问题 到目前为止 我已经考虑了两种实现方法 第一个是使用 OpenSSL 在 iOS 方面 我以模仿此处显示的代码的方式实现 http saju net in
  • 如果向下滚动经过它,则有一个 div 紧贴在屏幕顶部[重复]

    这个问题在这里已经有答案了 我有一个 div 当我的页面首次加载时 它距离顶部大约 100px 它包含页面的一些按钮等 当用户滚动经过它时 我希望 div 跟随 用户 因为它附加到屏幕顶部 当用户返回到页面顶部时 我希望它回到原来的位置 V
  • 如何使用 CSS 删除没有 html 标签的字符串

    我需要删除没有的字符串html tag 例如 div class A a href class link keep this a and i want to remove this div 我可以只使用 css 来做到这一点吗 也许你可以使
  • Eclipse + Maven + JavaServer Faces -> ClassNotFoundException:StartupServletContextListener

    Summary 当我尝试从 Eclipse 中 在 Tomcat 7 0 上 运行 JSF 2 0 应用程序时 出现以下异常 Problem SEVERE Error configuring application listener of
  • 消除解析器精神规则中的左递归 x3

    我目前陷入了一条规则 我试图使用 boostspirit x3 来解析 这是我要解析的 EBNF 使用 Spirit 中的 运算符作为列表 type class type lambda type lambda type more arg l
  • “NoMethodError:[:not(.block-layered-nav)]:Array的未定义方法‘特异性’”

    这是对这篇文章的补充 无法在 Magento CE 1 9 中编译 rwd 皮肤 SCSS Windows 8 1 PowerShell Compass 1 0 1 Polaris Sass 3 4 6 Selective Steve ru
  • Pandas 按列将 CSV 拆分为多个 CSV(或 DataFrame)

    我对一个问题感到非常困惑 如果有一些帮助或提示 我将不胜感激 问题 我有一个 csv 文件 其中有一列可能有多个值 例如 Fruit Color The evil column Apple Red something1 Apple Gree
  • 使用 ant 编辑/追加数据到文本文件

    我正在尝试在 ant 构建过程中向 jad 文件添加属性 ant 中有任务可以做到这一点吗 我需要做的就是在文本文件的末尾添加一行文本 但我找不到执行此操作的任务 我相信这会起作用 现在测试一下
  • 检测 jQuery.ajaxComplete() 中是否存在 HTTP 方法(POST、GET)

    In a jQuery ajaxComplete 如何检测 HTTP 方法 特别是 GET 或 POST 我尝试阅读 jQuery 文档并四处搜索 但似乎找不到传递给内部函数处理程序的 3 个对象的太多文档 jQuery element a
  • 如何诊断或检测 Java 静态初始化器中的死锁

    在 Java 中使用静态初始化器是否是一个好主意超出了这个问题的范围 我在 Scala 应用程序中遇到了死锁 我认为这是由编译类中的互锁静态初始化器引起的 我的问题是如何检测和诊断这些死锁 我发现当涉及静态初始化程序块时 用于死锁的普通 J
  • 如何将 jQuery 自动完成组合框与 AJAX JSON 数据一起使用?

    我需要使用组合框执行以下操作 Select box有一个用户可以搜索的默认城市列表 如果用户在input框 我需要进行 ajax 调用来获取数据并向用户显示选项 如果根据用户的请求获取数据 则应将这些城市附加到以下选项中Select box
  • 如何关闭生产中的 Node.js Express(ejs 模板引擎)错误?

    当我在开发服务器上出现错误时 Express 会发送回溯作为响应 然而 这对于生产来说并不好 我不想让任何人看到我的引用 我怎样才能关闭它 注意 我使用 EJS 作为模板引擎 这可能是原因 而不是表达 例如 当我在 ejs 模板中有一个未定
  • 使用 Zip() 合并不同长度的数组而不丢失值

    在下面的代码中 我合并两个类型的数组int and string 第一个的长度大于第二个 因此最后一个索引 即5 不会被合并 int numbers new 1 2 3 4 5 string words new string one two
  • 媒体查询可以根据 div 元素而不是屏幕调整大小吗?

    我想使用媒体查询根据 a 的大小调整元素的大小div它们所在的元素 我不能使用屏幕尺寸作为div只是像网页中的小部件一样使用 其大小可能会有所不同 是的 CSS 容器查询正是您所寻找的 这CSS 遏制模块是详细说明此功能的规范 您可以检查浏