媒体查询可以根据div元素而不是屏幕调整大小吗？
Zub*_*air 283 css css3 media-queries
我想使用媒体查询根据元素的大小调整元素的大小div.我不能使用屏幕大小,因为div它只是像网页中的小部件一样使用,其大小可能会有所不同.
更新
看起来现在正在做的工作:https: //github.com/ResponsiveImagesCG/cq-demos
Bol*_*ock 209
不,媒体查询不是基于页面中的元素而设计的.它们旨在基于设备或媒体类型工作(因此它们被称为媒体查询).width,height和其他基于维度的媒体功能都是指基于屏幕的媒体中视口或设备屏幕的尺寸.它们不能用于引用页面上的某个元素.
如果您需要根据页面上某个div元素的大小应用样式,则必须使用JavaScript来观察该div元素大小的变化,而不是媒体查询.
- 要在本地实现这一点,我们需要`@ element`查询.W3C有一些关于`@media`查询的押韵/原因的好文档:http://www.w3.org/TR/css3-mediaqueries/#width(这个链接带你到讨论宽度的部分---宽度媒体类型,而不是其中包含的元素) (6认同)
Mar*_*idt 112
我刚刚创建了一个javascript shim来实现这个目标.看看你是否想要它,它是一个概念验证,但要小心:它是一个早期版本,仍然需要一些工作.
https://github.com/marcj/css-element-queries
- 谢谢,我印象深刻 (5认同)
- 这难以置信.结合响应式引导程序,我正在做一些只用@media无法实现的很棒的东西.做得好. (5认同)
- 你救了我们的生命 (3认同)
Dja*_*ave 33
从布局的角度来看，使用现代技术是可能的。
它由 Heydon Pickering 组成（我相信）。他在这里详细介绍了这个过程：http : //www.heydonworks.com/article/the-flexbox-holy-albatross
Chris Coyier 拿起它并在此处完成了它的演示：https : //css-tricks.com/putting-the-flexbox-albatross-to-real-use/
为了重申这个问题，下面我们看到 3 个相同的组件，每个由三个标记为a、b和 的橙色 div 组成c。
第二个二的块垂直显示，因为它们被限制在水平空间，而顶部的3个块是水平布置的。
它使用flex-basisCSS 属性和 CSS 变量来创建这种效果。
.panel{
display: flex;
flex-wrap: wrap;
border: 1px solid #f00;
$breakpoint: 600px;
--multiplier: calc( #{$breakpoint} - 100%);
.element{
min-width: 33%;
max-width: 100%;
flex-grow: 1;
flex-basis: calc( var(--multiplier) * 999 );
}
}
Heydon 的文章有 1000 字，详细解释了它，我强烈建议您阅读它。
aus*_*usi 24
目前单独使用CSS是不可能的,因为@BoltClock在接受的答案中写道,但你可以通过使用JavaScript来解决这个问题.
我创建了一个容器查询(又名元素查询)prolyfill来解决这类问题.它的工作方式与其他脚本略有不同,因此您无需编辑元素的HTML代码.您所要做的就是包含脚本并在CSS中使用它,如下所示:
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
https://github.com/ausi/cq-prolyfill
- [Prolyfills](https://au.si/what-is-a-prolyfill)(以及[polyfills](https://en.wikipedia.org/wiki/Polyfill))通常用JS编写以启用功能浏览器尚不支持.一旦CSS支持此功能,prolyfill的目标就是过时了. (13认同)
- 它充满了JS.目标是仅在CSS中使用该功能. (2认同)
- @ius在问题中没有提到"仅CSS".你是怎么得出这个结论的？ (2认同)
小智 14
几年前我遇到了同样的问题,并资助开发一个插件来帮助我完成工作.我已经将这个插件作为开源发布,所以其他人也可以从中受益,你可以在Github上获取它:https://github.com/eqcss/eqcss
根据我们对页面上元素的了解,我们可以通过几种方式应用不同的响应式样式.以下是EQCSS插件允许您在CSS中编写的一些元素查询:
@element 'div' and (condition) {
$this {
/* Do something to the 'div' that meets the condition */
}
.other {
/* Also apply this CSS to .other when 'div' meets this condition */
}
}
那么使用EQCSS的响应式样式支持哪些条件？
重量查询
- 最小宽度
px - 最小宽度
% - 最大宽度
px - 最大宽度
%
高度查询
- 最小高度
px - 最小高度
% - 最大高度
px - 最大高度
%
计数查询
- 最小字符
- 最多字符
- 分线
- MAX-线
- 最小的孩子
- MAX-儿童
特殊选择器
在EQCSS元素查询中,您还可以使用三个特殊选择器,以便更具体地应用您的样式:
$this(与查询匹配的元素)$parent(与查询匹配的元素的父元素)$root(文档的根元素,<html>)
元素查询允许您从单独响应的设计模块中组合您的布局,每个模块都有一些关于如何在页面上显示的"自我意识".
使用EQCSS,您可以设计一个小部件,从150px宽到1000px宽,然后您可以放心地将该小部件放入任何页面的任何侧边栏中使用任何模板(在任何网站上)和
问题很模糊.正如BoltClock所说,媒体查询只知道设备的尺寸.但是,您可以将媒体查询与下行选择器结合使用来执行调整.
.wide_container { width: 50em }
.narrow_container { width: 20em }
.my_element { border: 1px solid }
@media (max-width: 30em) {
.wide_container .my_element {
color: blue;
}
.narrow_container .my_element {
color: red;
}
}
@media (max-width: 50em) {
.wide_container .my_element {
color: orange;
}
.narrow_container .my_element {
color: green;
}
}
唯一的其他解决方案需要JS.
- 这个问题根本不含糊.事实上,这是一个非常好的问题.不幸的是,没有好的答案. (41认同)