缩放列表元素中的文本

Question

我需要我们社区的帮助。我创建了一个侧菜单，应该缩放特定的显示/屏幕尺寸。一般来说，宽度和高度的缩放工作如预期。我没有得到文本缩放完成。我尝试了svg文本选项从这个stackoverflow线程字体缩放基于容器的宽度。它要么就是不能处理列表元素，要么就是我在实现过程中犯了一个错误。

谢谢你的提示。

body {
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;

}
.menu {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 40vw;
background: black;
}
.menu-header {
display: inline-block;
position: relative;
color: white;
font-size: 26px;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: bold;
margin-top: 5vh;
margin-left: 20px;
}

.menu-container {
position: relative;
margin: 20px;
height: 20vh;
width: calc(100% - 40px);
background: rgb(50,50,50);
border-radius: 5px;
}
.menu-container {
position: relative;
margin: 20px;
height: 20vh;
width: calc(100% - 40px);
background: rgb(50,50,50);
border-radius: 5px;
}
.menu-left {
position: relative;
float: left;
width: 70%;
}
.menu-left ul {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
height: fit-content;
margin: 0 20px 0 20px;
}

.menu-right {
position: relative;
width: 30%;
float: right;
padding: 0;
margin-right: 20px;
height: fit-content;
}
.menu-state {
position: relative;
background: greenyellow;
width: 14vh;
height: 14vh;
float: right;
border-radius: 100%;
margin-top:3vh;
margin-left: 1vw;
}
ul {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
height: fit-content;
background: rgb(50,50,50);
border-radius: 5px;
padding-left: 20px;
}
li {
list-style: none;
height: 10vh;
line-height: 10vh;
color: white;
transition: transform 0.3s;
}
li:hover {
transform: scale(1.1);
}
i {
padding: 0 5px 0 5px;
}

<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>

<div class="menu">
<label class="menu-header">#Setting</label>
<div class="menu-container">
<div class="menu-left">
<ul>
<li><i class="fa-solid fa-user"></i>Responsible</li>
<li><i class="fa-solid fa-users"></i>Department</li>
</ul>
</div>
<div class="menu-right">
<div class="menu-state"></div>
</div>
</div>
<div class="menu-container">
<ul>
<li><span><i class="fa-solid fa-pen-to-square"></i></span>Name</li>
<li><span><i class="fa-solid fa-palette"></i></span>Color</li>
</ul>
</div>
</div>

Answer 1

如果您试图根据查看器宽度操作字体大小，那么您必须在li上设置当前没有的font-size属性。这是一个简单的修复，但我建议看看这篇关于流体排版的文章更优雅一点:https://css-tricks.com/simplified-fluid-typography/

body {
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;

}
.menu {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 40vw;
background: black;
}
.menu-header {
display: inline-block;
position: relative;
color: white;
font-size: 26px;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: bold;
margin-top: 5vh;
margin-left: 20px;
}

.menu-container {
position: relative;
margin: 20px;
height: 20vh;
width: calc(100% - 40px);
background: rgb(50,50,50);
border-radius: 5px;
}
.menu-container {
position: relative;
margin: 20px;
height: 20vh;
width: calc(100% - 40px);
background: rgb(50,50,50);
border-radius: 5px;
}
.menu-left {
position: relative;
float: left;
width: 70%;
}
.menu-left ul {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
height: fit-content;
margin: 0 20px 0 20px;
}

.menu-right {
position: relative;
width: 30%;
float: right;
padding: 0;
margin-right: 20px;
height: fit-content;
}
.menu-state {
position: relative;
background: greenyellow;
width: 14vh;
height: 14vh;
float: right;
border-radius: 100%;
margin-top:3vh;
margin-left: 1vw;
}
ul {
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
height: fit-content;
background: rgb(50,50,50);
border-radius: 5px;
padding-left: 20px;
}
li {
list-style: none;
height: 10vh;
line-height: 10vh;
color: white;
transition: transform 0.3s;
font-size: 2vw; /* <---- this here */
}
li:hover {
transform: scale(1.1);
}
i {
padding: 0 5px 0 5px;
}

<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>

<div class="menu">
<label class="menu-header">#Setting</label>
<div class="menu-container">
<div class="menu-left">
<ul>
<li><i class="fa-solid fa-user"></i>Responsible</li>
<li><i class="fa-solid fa-users"></i>Department</li>
</ul>
</div>
<div class="menu-right">
<div class="menu-state"></div>
</div>
</div>
<div class="menu-container">
<ul>
<li><span><i class="fa-solid fa-pen-to-square"></i></span>Name</li>
<li><span><i class="fa-solid fa-palette"></i></span>Color</li>
</ul>
</div>
</div>