时间戳

首页 > 解决方案 > 如何在没有javascript的情况下根据父宽度更改子元素中的字体大小

css - 如何在没有javascript的情况下根据父宽度更改子元素中的字体大小

问题描述

我有一个数字宽度的框，我想根据父宽度更改子元素的字体大小，我使用了 vw 或 em，但不起作用，仅使用 css 或 sass 即可

<div class="timer" >
 <div class="timer__minute">12</div>
</div>

粗鲁的

.timer{
min-width:100px;
max-width:500px;
&__minute{
 padding:10px
}
}

标签： csssass

解决方案

:root {
  --width: 10em;
}

.parent {
width: var(--width);
height: 100px;
border: 1px solid #333;
display: grid;
place-content: center;
}

.parent p {
  margin: 0;
  font-size: calc(var(--width) /4);
}
<div class="parent">
  <p>Hello</p>
</div>

使用自定义属性或 sass 变量和 calc 函数来满足您的需求

推荐阅读