前端vue2怎么根据font-size为12px的字符串做大小差不多的盒子

在 Vue2 中，如果你想根据特定字体大小（比如 12px）创建一个大小相仿的盒子，你可以利用 CSS 的相对单位来设置元素的尺寸，这样不会直接依赖于字体大小。这里有一个基本的例子：

首先，在CSS中，我们可以创建一个基于基准字体大小（如 `16px`）的计算值：

/* 创建一个12px相对于16px的比例 */
@value baseFontSize: 16px;
@value fontSizeRatio: calc(12px / baseFontSize);

.container {
  font-size: baseFontSize; /* 确保基础字体为16px */
  line-height: baseFontSize; /* 保持行高一致，也可以选择适当比例 */
  
  /* 使用相对单位创建大小接近的容器 */
  width: calc(fontSizeRatio * 100%); /* 宽度是字体大小的12/16 */
  height: auto; /* 如果需要，高度可以是自适应的 */
}

然后，在Vue组件里，你可以根据这个样式创建一个容器：

<div class="container" :style="{ fontSize: '12px' }"> <!-- 绑定到12px -->
  这里的内容将会按照12px的字体大小呈现，并且容器大小与之匹配
</div>