根据 div 大小调整 font-size [英] Resize font-size according to div size

问题描述

它由 9 个盒子组成，中间有文字.我已经做了这样的盒子，所以它们会随着屏幕大小的调整而调整大小，所以它会一直保持在同一个地方.

然而，即使我使用百分比，文本也不会调整大小.

1. 如何调整文本大小，使其与整个页面的比例始终相同?
2. 这是处理多个分辨率的合适解决方案吗?或者我应该在 CSS 中有许多 @media 检查并为每种媒体类型有许多布局?

html,身体 {高度:100%；宽度:100%；}#launchmain {宽度:55%；显示:内联块；位置:相对；前10名％;左:25%；}#launchmain:在{之后填充顶部:79.26%；显示:块；内容: '';边距顶部:10px；}#box1 {边框:1px 实心 #000000；位置:绝对；宽度:25.37%；高度:21.88%}#box2 {边框:1px 实心 #000000；宽度:48.48%；高度:21.88%；位置:绝对；左:25.64%}#box3 {边框:1px 实心 #000000；宽度:25.37%；高度:21.88%；位置:绝对；左:74.39%；}#box4 {边框:1px 实心 #000000；宽度:33.235%；高度:53.84%；位置:绝对；最高:22.07%；}#maininvite {边框:1px 实心 #000000；宽度:33.53%；高度:53.84%；位置:绝对；最高:22.07%；左:33.235%；}#box6 {边框:1px 实心 #000000；宽度:33.235%；高度:53.84%；位置:绝对；最高:22.07%；左:66.765%；}#box7 {边框:1px 实心 #000000；宽度:25.37%；高度:21.88%；位置:绝对；最高:76.2%；}#box8 {边框:1px 实心 #000000；宽度:48.48%；高度:21.88%；位置:绝对；左:25.64%；最高:76.2%；}#box9 {边框:1px 实心 #000000；宽度:25.37%；高度:21.88%；位置:绝对；最高:76.2%；左:74.39%；}#maininvite h2 {字体大小:180%；}p{位置:相对；字体大小:80%；}

<div id="box1"></div><div id="box2"></div><div id="box3"></div><div id="box4"></div><div id="maininvite"><h2>标题<p>这里的文字不多，但仍然溢出</p>
<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.默认情况下，它不适用于所有字体，但它有一个设置，允许您减少或增加重新调整大小的力量".它还允许您设置最小和最大字体大小.第一次开始工作需要一些麻烦，但效果很好.

http://marabeas.io <- 目前在这里玩它.据我了解，BigText 在我的上下文中根本不起作用.

对于那些使用 Angularjs 的人，这里有一个 Angular 版本的 FitText I'已经做了.

<小时>

这里有一个 LESS mixin，你可以用来让@humanityANDpeace 的解决方案更漂亮一点:

@mqIterations: 19;.fontResize(@i) 当 (@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);

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.

The text, however, doesn't resize - even when I use percentage.

1. How do I resize the text so it will always be the same ratio from the entire page?
2. Is this a proper solution to handle multiple resolutions? or should I have many @media checks in the CSS and have many layouts for each media types?

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="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>

解决方案

In regards to your code, see @Coulton. You'll need to use JavaScript.

Checkout either FitText (it does work in IE, they just ballsed their site somehow) or 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 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 <- playing with it currently here. As far as I understand, BigText wouldn't work in my context at all.

For those of you using Angularjs, here's an Angular version of FitText I've made.

---

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);

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屋！