css 使用带有fr单位的calc函数

xggvc2p6  于 2023-04-13  发布在  其他
关注(0)|答案(2)|浏览(154)

我有一个3x3的css网格,我想分别计算两个外部列和行的大小,中间的是1fr
到目前为止,我有:
(see this codepen

html {
  --zoom-scale: 1;  
}

body {
  --weight: calc(((var(--zoom-scale) - 1) / 2 * 1fr));
}

.grid {
  grid-template-columns: var(--weight) 1fr var(--weight);
  grid-template-rows: var(--weight) 1fr var(--weight);

  /* Expecting this for --weight = 1 */
  /* grid-template-columns: 0 1fr 0;
  grid-template-rows: 0 1fr 0; */

  /* And this for --weight = 3 */
  /* grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr; */
}

我的Chrome浏览器从来不接受任何计算的模板属性值。这里正确的语法是什么?
正如您可能已经猜到的,我在这里试图解决的总体问题是将给定的矩形空间划分为网格,使得中间的单元格可以按--zoom-scale的比例放大,并且仍然完全包含在网格容器中。

unftdfkk

unftdfkk1#

您不能使用fr执行计算,您可以使用grid-template-columns: calc(1 * 1fr);进行验证,您将获得无效值。
您可以切换到百分比,从0切换到50%

body {
  margin: 0;
  --zoom-scale: 5;
  --weight: calc(((var(--zoom-scale) - 1) / 2 * 10%));
}

.grid {
  background: beige;
  display: grid;
  height: 100vh;
  grid-template-columns: var(--weight) 1fr var(--weight);
  grid-template-rows: var(--weight) 1fr var(--weight);
}

.grid > * {
  grid-row: 2;
  grid-column: 2;
  background: red;
  overflow: auto;
}
<div class="grid">
  <div>
    This is the grid content we are going to zoom, sporting a long text.
  </div>
</div>

还可以使用margin以较少的代码执行相同的任务

body {
  margin: 0;
  --zoom-scale: 5;
}

.grid {
  background: beige;
  display: grid;
  height: 100vh;
}

.grid > * {
  background: red;
  margin:
   calc(((var(--zoom-scale) - 1) / 2 * 10vh))
   calc(((var(--zoom-scale) - 1) / 2 * 10vw));
  overflow: auto;
}
<div class="grid">
  <div>
    This is the grid content we are going to zoom, sporting a long text.
  </div>
</div>
2vuwiymt

2vuwiymt2#

fr单元不是数学运算符(+,-,×,÷),因此不能在calc()函数中使用。
fr单位只是自由空间的一种表示,而不是实际的长度单位。

7.2.4.柔性长度:fr单元

灵活长度或<flex>是单位为fr的维度,它表示网格容器中剩余空间的一小部分。
calc()函数是一个使用数学运算符的计算。

10.1.基本运算:calc()

calc()函数是一个数学函数,它允许使用加法(+)、减法(-)、乘法(*)、除法(/)和括号对数值执行基本算术。
一个calc()函数包含一个计算,它是一个值序列,中间穿插着运算符,可能用括号分组。
问题中的问题的解决方案已在another answer中提供。

相关问题