基于字体大小的缩放元素

Question

我正在使用css设置标签样式，我正在尝试根据其中使用的字体大小来缩放它们。

此处的目标是缩小整体尺寸，但保持比例与tranform: scale一样，但不会降低质量。

例如：

字体大小为1em

，字体大小为0.5em

关于如何实现这一点的任何想法？

谢谢！

Answer 1

如果您希望根据字体大小设置标签的样式，则应使用填充作为其周围的空间，因此标签的大小取决于您的字体大小。

Answer 2

我不确定我是否理解正确。

基本上你想为标签设置字体大小，然后自动调整其他标签的字体大小？如果是这样......最简单的方法是对依赖标签的每个标签使用em。

<label>
  Label A
  <label>
    Label B
      <label>
        Label C
          <label>
            Label D
           </label>
      <label>
    </label>
</label>

CSS

label {
  display: block;
  font-size: 20px;
}
label > label {
  font-size: .9em;
}

codepen source here

Answer 3

你应该使用像＃34; .label-big＆＃34;这样的父类。和＆＃34; .label-small＆＃34;或类似的东西，并定义

的字体大小

＆＃13;

＆＃13;

var text = document.getElementById('text');
var label = document.getElementById('label');
var fontSize = window.getComputedStyle(text, null).getPropertyValue('font-size');

label.style.fontSize = fontSize;

＆＃13;

.label {
    display:inline-block;
    padding: 0.2em;
    border: 1px solid #999;
    border-radius: 2em;
}
.label-small { font-size: 16px }
.label-number {
    font-size: 1.2em;
    color: white;
    display: inline-block;
    border-radius: 50%;
    width: 1em;
    padding: 0.1em;
    text-align: center;
    background-color: #47E;
    line-height: 1em;
}
.label-text {
    font-size: 1em;
    vertical-align: 0.1em;
    line-height: 1em;
    padding-right: 0.2em
}

＆＃13;

<span class="label label-small" id="label">
    <div class="label-number">3</div>
    <span class="label-text" id="text" style="font-size: 40px">label text</span>
</span>

＆＃13;

＆＃13;

＆＃13;

<强>更新 据我所知，你想要实现的是根据文字大小格式化标签？

请注意，字体大小是40px，如文本而非16（从类继承）定义。所有这一切都必须由JS实现。这不是CSS任务，因为CSS选择器无法关注父元素：Is there a CSS parent selector?