如何解决根据div大小调整字体大小
关于您的代码，请参阅@Coulton。您需要使用JavaScript。
检出FitText（它确实在IE中起作用，他们只是以某种方式使其站点球形化或BigText。
FitText将允许您相对于其所在的容器缩放某些文本，而BigText则更多地是将文本的不同部分调整为容器内相同的宽度。
BigText会将您的字符串设置为容器的正好宽度，而FitText的像素完美度较低。首先将字体大小设置为容器元素宽度的1/10。默认情况下，它不适用于所有字体，但它的设置可让您减小或增大调整大小的“功效”。它还允许您设置最小和最大字体大小。第一次工作会需要一些摆弄，但是确实很好。
<-目前正在此处使用它。据我了解，BigText在我的上下文中根本无法工作。
对于那些使用Angularjs的用户，这是我制作的Angular版本的FitText。
这是一个LESS mixin，可用于使@humanityANDpeace的解决方案更加美观：
@mqIterations: 19;
.fontResize(@i) when (@i > 0) {
@media all and (min-width: 100px * @i) { body { font-size:0.2em * @i; } }
.fontResize((@i - 1));
}
.fontResize(@mqIterations);
感谢@NIXin，这是SCSS版本！
$mqIterations: 19;
@mixin fontResize($iterations) {
$i: 1;
@while $i <= $iterations {
@media all and (min-width: 100px * $i) { body { font-size:0.2em * $i; } }
$i: $i + 1;
}
}
@include fontResize($mqIterations);
解决方法
它由9个框组成，中间带有文本。我已经制作了框，以便它们可以随着屏幕大小的变化而调整大小，以便始终保持在同一位置。
但是，即使我使用百分比，文本也不会调整大小。
- 如何调整文本的大小，使其在整个页面上始终具有相同的比例？
- 这是处理多种分辨率的合适解决方案吗？还是我应该
@media在CSS中进行很多检查并为每种媒体类型设置许多布局？
```
html,
body {
height: 100%;
width: 100%;
}
#launchmain {
width: 55%;
display: inline-block;
position: relative;
top: 10%;
left: 25%;
}
#launchmain:after {
padding-top: 79.26%;
display: block;
content: '';
margin-top: 10px;
}
#box1 {
border: 1px solid #000000;
position: absolute;
width: 25.37%;
height: 21.88%
}
#box2 {
border: 1px solid #000000;
width: 48.48%;
height: 21.88%;
position: absolute;
left: 25.64%
}
#box3 {
border: 1px solid #000000;
width: 25.37%;
height: 21.88%;
position: absolute;
left: 74.39%;
}
#box4 {
border: 1px solid #000000;
width: 33.235%;
height: 53.84%;
position: absolute;
top: 22.07%;
}
#maininvite {
border: 1px solid #000000;
width: 33.53%;
height: 53.84%;
position: absolute;
top: 22.07%;
left: 33.235%;
}
#box6 {
border: 1px solid #000000;
width: 33.235%;
height: 53.84%;
position: absolute;
top: 22.07%;
left: 66.765%;
}
#box7 {
border: 1px solid #000000;
width: 25.37%;
height: 21.88%;
position: absolute;
top: 76.2%;
}
#box8 {
border: 1px solid #000000;
width: 48.48%;
height: 21.88%;
position: absolute;
left: 25.64%;
top: 76.2%;
}
#box9 {
border: 1px solid #000000;
width: 25.37%;
height: 21.88%;
position: absolute;
top: 76.2%;
left: 74.39%;
}
#maininvite h2 {
font-size: 180%;
}
p {
position: relative;
font-size: 80%;
}
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="maininvite">
<h2> header</h2>
<p>not a lot of text here but still overflowing</p>
</div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
<div id="box9"></div>
```
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。