标签: container-queries
容器类型CSS属性的“size”和“inline-size”有什么区别
我正在尝试使用container-type属性来设置一个容器查询，当达到容器的特定高度时，该查询将更改子元素的对齐方式。
.snackbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 500px;
margin: 0 auto;
padding: 12px;
border-radius: 4px;
color: white;
background-color: #333;
font-size: 14px;
font-family: sans-serif;
}
.snackbar-inline-size {
container-type: inline-size;
container-name: mySnackbar;
}
.snackbar-size {
container-type: size;
container-name: mySnackbar;
}
.snackbar-size-fixed-height {
container-type: size;
container-name: mySnackbar;
height: 100px;
}
.actions-container {
display: flex;
align-items: center;
justify-content: center;
}
.actions-container button {
margin-left: 12px;
}
@container mySnackbar (min-height: 40px) {
.actions-container {
align-self: flex-end;
}
}<h2>container-type: inline-size</h2> …推荐指数
解决办法
查看次数
基于高度的容器查询不起作用
我想在现代 Safari/Chrome 浏览器中使用新的 CSS 容器查询。（Safari 16.3、谷歌浏览器 113.0）
但是，基于高度的容器查询并未按预期工作。
预期结果：一旦外部容器变成蓝色（500px 屏幕高度或以下），我预计粉色方块（500px 容器的 50vh）就会变成红色。
当前结果：正方形保持粉红色并且不会变成粉红色。如果实现是相对宽度的，则该示例有效。
我在实现中是否做错了什么，或者只是没有在 Webkit 引擎中实现 jet ？如果在最终产品中用户可以调整容器的大小，还有其他解决方案（不使用 JavaScript）来解决该问题吗？
body {
margin: 0
}
.container {
height: 50vh;
container-type: inline-size;
}
.test {
width: 250px;
height: 250px;
background-color: hotpink;
}
@container (max-height: 250px) {
.test {
background-color: red;
}
}
@media screen and (max-height: 500px) {
.container {
background: blue;
}
}<div class="container">
<div class="test"></div>
</div>推荐指数
解决办法
查看次数
容器查询折叠元素的宽度
为什么container-type: inline-size正常渲染跨度但折叠按钮：
<span style="container-type: inline-size; outline: 1px solid blue;">
This is a span
</span>
<button style="container-type: inline-size;">
This is a button
</button>推荐指数
解决办法
查看次数
如何通过@container查询修改容器类型元素的CSS属性：inline-size
我正在寻找如何container-type: inline-size;通过查询修改元素（不在子元素中）的CSS中的属性的解决方案@container。
考虑 HTML
<div class="card card--1">
<h2 class="card__title">
card 1 title
</h2>
<p class="card__body">
lorem ipsum
</p>
</div>
<div class="card card--2">
<h2 class="card__title">
card 2 title
</h2>
<p class="card__body">
lorem ipsum
</p>
</div>
和CSS
.card {
container-type: inline-size;
background-color: antiquewhite;
}
.card--1 {
width: 200px;
}
.card--2 {
width: 300px;
}
@container (min-width: 250px) {
.card {
/* do not work */
background-color: aqua;
}
.card__title {
/* works fine */
color: red;
}
} …推荐指数
解决办法
查看次数
容器查询：为什么我无法在容器查询中设置容器选择器的样式
使用容器查询时。我无法在容器查询本身中设置容器查询设置的元素的样式。就像下面这样。
.container {
width: 250px;
height: 250px;
background-color: hotpink;
container-type: inline-size;
}
@container (max-width: 768px) {
/* This selector doesn't work here */
.container {
background-color: red;
}
}<div class="container"></div>有谁知道为什么不能这样做？
推荐指数
解决办法
查看次数
通过 div 宽度或高度进行 CSS 媒体查询
是否可以通过某些 DIV 宽度或高度来实现特定的 CSS 样式？
像这样的东西：
@media screen and (max-width: 1024px)
推荐指数
解决办法
查看次数
CSS 容器内联大小和固定子级
这是我的项目的一个粗略模型。父级有容器查询，而子级支持修复（偶尔）。如果父级具有内联大小的容器查询，则子级不再固定到页面。
这种行为可以预防吗？我意识到，如果我将内联大小应用于子级而不是父级，它似乎可以工作，但我正在尝试找到一种解决方案，以便在可能的情况下在父级上使用内联大小。
.parent {
position: relative;
height: 150px;
background: #eee;
max-width: 300px;
container: dialog_data / inline-size;
}
.child {
background: red;
height: 100px;
top: auto!important;
position: fixed!important;
z-index: 2147483648;
bottom: 20px!important;
left: 20px!important;
margin: 0!important;
width: 100%;
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
}<div class="parent">
<div class="child "></div>
</div>推荐指数
解决办法
查看次数
为什么 vscode 无法识别 Container Query
规则 @containercss(unknownAtRules) 未知属性：'container-type'css(unknownProperties) 未知属性：'container-name'css(unknownProperties)
推荐指数
解决办法
查看次数
如何在 HTML/CSS 中使用“container-type: inline-size”相对于视口而不是父元素定位绝对/固定元素？
我有一个父元素 ( #container) 和container-type: inline-size. 在这个元素内，我有一个带有 的子元素 ( #absolute) position: absolute。这会导致绝对元素相对于 定位#container。但是，我想将其相对于视口定位。
据我所知，这是由container-type: inline-size父元素作为绝对元素的包含块的规则引起的。
container-type: inline-sizeon#container是使用与容器维度相关的容器查询所必需的。在我的例子中，绝对元素呈现在内部#container并且不能轻易移出。
现实生活中的用例是主应用程序#container和全屏模式，它们在负责的组件（位于主容器内）内呈现。
#foo {
width: 100px;
height: 100px;
background-color: lightgreen;
}
#container {
container-type: inline-size;
width: 200px;
height: 100px;
background-color: yellow;
}
#absolute {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 50px;
background-color: orange;
}<html>
<body>
<div id="foo">foo</div>
<div id="container">
<div id="absolute">Absolute</div>
</div>
</body>
</html>子元素（橙色）相对于父元素（黄色）定位。但我希望它相对于视口，这将使其出现在绿色元素的内部/顶部。 …
推荐指数
解决办法
查看次数