根据div大小调整字体大小

它由9个框组成,中间带有文本。我已经制作了框,以便它们可以随着屏幕大小的变化而调整大小,以便始终保持在同一位置。

但是,即使我使用百分比,文本也不会调整大小。

  1. 如何调整文本的大小,使其在整个页面上始终具有相同的比例?
  2. 这是处理多种分辨率的合适解决方案吗?还是我应该@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>

```

回答:

关于您的代码,请参阅@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);

以上是 根据div大小调整字体大小 的全部内容, 来源链接: utcz.com/qa/436283.html

回到顶部