根据div大小调整font-size [英] resize font-size according to div size
问题描述
我已将此 jsfiddle
html：
<div id="launchmain" >
<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>
</div>
与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%;
}
它由9个盒子组成，有文本它
我已经使它的框，所以他们将调整大小与屏幕调整大小，所以它将一直保持在同一个地方。
It is made of 9 boxes, with the middle on has text it in. I've made it so the boxes so they will resize with the screen resize so it will remain in the same place all the time.
- 如何调整文本大小，与整个页面的比率是否相同？
- 这是处理多个分辨率的正确解决方案吗？或者我应该在css中有许多@media检查，并且对于每种媒体类型有很多布局？
推荐答案
关于您的代码，请参阅@Coulton。您需要使用JavaScript。
In regards to your code, see @Coulton. You'll need to use JavaScript.
请 FitText （它可以在IE，他们只是在他们的网站不知何故）或 BigText 。
Checkout either FitText (it does work in IE, they just ballsed their site somehow) or BigText.
FitText将允许你缩放一些文本相对于它所在的容器，而BigText更多地关于调整文本的不同部分为同一宽度在容器内。
FitText will allow you to scale some text in relation to the container it is in, while BigText is more about resizing different sections of text to be the same width within the container.
BigText会将字符串设置为容器的宽度，而FitText的像素完美度较低。它首先将字体大小设置为容器元素宽度的1/10。它在默认情况下不能很好地与所有字体工作，但它有一个设置，允许您减少或增加重新调整大小的力量。它还允许您设置最小和最大字体大小。
BigText will set your string to exactly the width of the container, whereas FitText is less pixel perfect. It starts by setting the font-size at 1/10th of the container element's width. It doesn't work very well with all fonts by default, but it has a setting which allows you to decrease or increase the 'power' of the re-size. It also allows you to set a min and max font-size. It will take a bit of fiddling to get working the first time, but does work great.
http： //marabeas.io < - 目前在这里玩。根据我的理解，BigText不会在我的上下文中工作。
http://marabeas.io <- playing with it currently here. As far as I understand, BigText wouldn't work in my context at all.
对于你使用Angularjs，这里有一个 Angular版本的FitText。
For those of you using Angularjs, here's an Angular version of FitText I've made.
这里是一个LESS mixin，你可以用来使@ humanityANDpeace的解决方案更漂亮：
Here's a LESS mixin you can use to make @humanityANDpeace's solution a little more pretty:
@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);
以及一个SCSS版本感谢@NIXin！
And an SCSS version thanks to @NIXin!
$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大小调整font-size的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
