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

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; */
}

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>

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>

Css相关问答推荐

如何使用css创建带有曲线的自定义按钮

使用背景滤镜时，伪元素出现在div之前

Vue3日期 Select 器：禁用向左和向右箭头

如何居中对齐容器父对象？

在ReactJS中使用动画在栅格上添加柱

如何在页面顶部创建固定横幅，并在其下方设置滚动条？

如何向 Highcharts 迷你图添加具有淡入淡出效果的线性渐变？

为什么左浮动上的清除：左也会影响右浮动，以及如何避免它

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

我无法覆盖 react ui 库中的组件样式

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

Flexbox 子高度它的内容

使用border-radius CSS时平滑边框

使用 Flex Box Tailwind CSS 的元素不相等

在同一旋转中以度数变换旋转

如何根据其中的内容自动调整

的高度？

如何使用 Gulp 复制多个文件并保持文件夹 struct

如何从标题中删除粗体？

删除行内块元素中大文本上方和下方的空白

如何知道哪个 HTML 元素导致了垂直滚动条