当前位置: 首页 > 面试题库 >

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

单于扬
2023-03-14
问题内容

我想使用媒体查询根据div其所在元素的大小来调整元素的大小。我不能使用屏幕大小,因为div只是像网页中的小部件一样使用,它的大小可以变化。


问题答案:

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

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



 类似资料:
  • 问题内容: 我目前正在尝试设计一种可以兼容多种屏幕尺寸的布局。我正在设计的屏幕尺寸如下: 屏幕尺寸: 640x480 800x600 1024x768 1280x1024(及更大) 我遇到的麻烦是创建css3媒体查询,以便当窗口的宽度变为这些宽度之一时,布局会发生变化。以下是我当前正在使用的媒体查询的示例,但不适用于我,因此我想知道是否有人可以帮助我修复它。 我尝试使用一组新的媒体查询,但是它们仍

  • 基本上,我的媒体查询比应该的低15像素,例如: 当网页宽度达到1200px或更低时,上面的css应该将h1更改为蓝色,而不是在1185px时触发。我尝试过其他断点,它始终是15px。我使用检查工具查看网页宽度,并查看body元素的宽度,但我也使用了“console.log($(窗口)。宽度())”,相同的答案。但是,打开检查工具后,如果我重新调整窗口大小,它会以像素为单位显示右上角的“宽度x高度”

  • 问题内容: 它由9个框组成,中间带有文本。我已经制作了框,以便它们可以随着屏幕大小的变化而调整大小,以便始终保持在同一位置。 但是,即使我使用百分比,文本也不会调整大小。 如何调整文本的大小,使其在整个页面上始终具有相同的比例? 这是处理多种分辨率的合适解决方案吗?还是我应该在CSS中进行很多检查并为每种媒体类型设置许多布局? ``` html, body { } #launchmain { }

  • 问题内容: 有人问过类似的问题,但是解决方案确实与我正在尝试做的事情相吻合。基本上,我有一篇标题为()的文章。我不想控制标题的长度,但是我也不想标题显示在多行上。CSS或jQuery是否可以根据标签的宽度来调整文本大小? 我知道如果可以检测到文本与边缘的重叠,我将如何处理伪代码: 如果有一个CSS属性,我可以设置为更好,但是我似乎找不到(在这种情况下,溢出不会起作用)。 问题答案: CSS否,Ja

  • 我是一个新的android开发和我正在尝试创建和应用程序与网格菜单,菜单。 当前依赖项:compile fileTree(目录:“libs”,include:['*.jar'])testCompile“junit:junit:4.12”编译组:“org.apache.httpcomponents”,名称:“httpclient-android”,版本:“4.3.5.1”编译组:“cz.mseber

  • 为了增强用户体验,CSS3 中新增了一个非常实用的 resize 属性,该属性允许用户通过拖动的方式来自由缩放元素的尺寸,在此之前要实现类似的效果还需要借助大量的 JavaScript 代码。resize 属性的语法格式如下: resize: none|both|horizontal|vertical; 语法说明如下: none:用户无法调整元素的尺寸; both:用户可调整元素的高度和宽度; h