问题描述
我无法从我能找到的任何解释中确定关于何时设置 css 变量的值。所以我进行了测试
html
<div class="flex">
<div class="item1">
<div class="included"></div>
</div>
<div class="item2">
<div class="included"></div>
</div>
</div>
css
:host {
display: grid;
place-content: center;
}
.flex {
display: flex;
flex-direction: column;
width:800px;
height: 300px;
background-color: blue;
--div-width: calc(100% - 10px);
}
.item1,.item2 {
background-color: green;
height: 100px;
}
.item1 {
width: 80%;
}
.item2 {
width: 40%;
}
.included {
width: var(--div-width);
background-color:yellow;
height:50px;
}
注意我在自定义元素中进行了测试,因此 :host
描述符,但这并不重要。
重要的是我在 800 像素宽的 div 中将 --div-width
设置为 calc(100% - 10px)
- 所以期望它具有 790 像素的值。
很明显,计算被延迟到使用变量的地方。因为黄色框距离周围元素仅 10 像素。
有没有办法告诉 css 将属性的值设置为声明它的元素,而不是使用它的地方。
我确实尝试代理变量 - 就像这样......
--proxy-width: calc(100% - 10px);
--div-width: var(--proxy-width);
但没有区别。
PS 这是一个简单的例子,我实际上想如何使用它来控制自定义元素内项目(文本区域)的宽度,取决于上下文,因此我可以使元素响应一些外部容器的宽度。
解决方法
如果我理解正确,您想让元素响应相对于父容器的大小变化。我这样做的方式(但相对于视口)是使用 relative length units 之类的 vmin
以及 calc()
和 CSS 变量。通过这种方式,我们可以创建一个“响应单元”,无论它是相对于初始包含块还是其他一些定位祖先。
下面的示例显示了一个带有嵌套 <div>
的 <textarea>
,它由响应单元提供支持。由于此 width
和 height
计算是相对于视口完成的,即使 <textarea>
是 div 的子项。您可以将 vmin
交换为相对长度单位,该单位不是相对于视口,而是相对于某个祖先(如自定义元素)。
.wrapper {
border: 1px solid;
padding: 1rem;
}
textarea {
--w: 150;
--h: 80;
width: 200px; /* fallback width */
height: 200px; /* fallback height */
width: calc(var(--w) * 1vmin);
height: calc(var(--h) * 1vmin);
max-width: 100%;
/* extra styles for demo */
border: 1px solid red;
margin: 0 auto;
}
<div class="wrapper">
<textarea id="demo" name="demo"
rows="5" cols="30">It was a dark and stormy night...
</textarea>
</div>
我找到了一个“完美”的解决方法!
对此的解决方案是使用 'resize' 事件读取您想要使用 getBoundingClientRect();
时使用 100% 的元素的大小,并使用返回的宽度将“calc”设置为宽度 px - 无论如何
因此对于问题中的示例,我将使用此代码
_resize() {
if (this.resizeInProgress) return;
this.resizeInProgress = true;
requestAnimationFrame(() => {
const container = this.shadowRoot.querySelector('.flex');
const bound = container.getBoundingClientRect();
container.style.setProperty('--div-width',`calc(${bound.width}px - 10px)`);
this.resizeInProgress = false;
});
}
我在自定义元素构造函数中将该函数绑定到 this
this.resizeInProgress = true;
this._resize = this._resize.bind(this);
这在 connectedCallback
do
window.addEventListener('resize',this._resize);
this.resizeInProgress = false;
并在我的 disconnectedCallback
中再次删除它
this.resizeInProgress = true;
window.removeEventListener('resize',this._resize);
我保留了 calc()
函数,因为在我的现实生活中,减去的数量是以“em”为单位的