根据分区大小调整字体大小。

I've made this jsfiddle

我做了这个jsfiddle

the html:

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>

with css:

用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%;
}

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.

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

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

然而，文本并没有调整大小——即使我使用百分数。

How do I resize the text so it will always be the same ratio from the entire page?
如何调整文本的大小，使其始终与整个页面的比例相同?
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?
这是处理多个解决方案的恰当解决方案吗?或者我应该在css中有很多@media检查，并且对每种媒体类型都有很多布局?

6 个解决方案

#1

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

关于您的代码，请参见@Coulton。您需要使用JavaScript。

Checkout either FitText (it does work in IE, they just ballsed their site somehow) or BigText.

要么选择FitText(它确实在IE中工作)，要么就是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.

FitText将允许您根据它所在的容器来扩展一些文本，而BigText则更多地是关于调整文本的不同部分，使其在容器中保持相同的宽度。

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.

BigText会将您的字符串设置为容器的宽度，而FitText则没有那么完美。它首先设置容器元素宽度的1/10的字体大小。默认情况下，它不能很好地处理所有字体，但是它有一个设置，允许您减少或增加重新设置的“power”。它还允许设置最小值和最大字体大小。第一次上班要花点时间，但工作确实很好。

http://marabeas.io <- playing with it currently here. As far as I understand, BigText wouldn't work in my context at all.

http://marabeas。io <-在这里播放。据我所知，BigText在我的语境中根本不起作用。

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

对于那些使用Angularjs的人来说，这是我做过的一个角度版本的FitText。

Here's a LESS mixin you can use to make @humanityANDpeace's solution a little more pretty:

这里有一个更少的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);

And an SCSS version thanks to @NIXin!

和一个SCSS版本感谢@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);

#2

My answer does not require Javascript and only relies on CSS3 (available in most modern browsers). I personally like it very much if design is not relying on Javascript too much.

我的答案不需要Javascript，只依赖于CSS3(在大多数现代浏览器中都可以使用)。我个人非常喜欢它，如果设计不太依赖Javascript。

My answer is a "pure CSS3 , no Javascript required"-solution:

我的答案是“纯CSS3，不需要Javascript”-解决方案:

The solution as can be seen here (http://jsfiddle.net/uNF3Z/16/) uses the following additions to the CSS styles (which make use of the @media query of CSS3 which)

可以在这里看到的解决方案(http://jsfiddle.net/uNF3Z/16/)使用以下添加到CSS样式(它使用了CSS3的@media查询)

@media all and (min-width: 50px)   {  body  { font-size:0.1em;  } }
@media all and (min-width: 100px)  {  body  { font-size:0.2em;  } }
@media all and (min-width: 200px)  {  body  { font-size:0.4em;  } }
@media all and (min-width: 300px)  {  body  { font-size:0.6em;  } }
@media all and (min-width: 400px)  {  body  { font-size:0.8em;  } }
@media all and (min-width: 500px)  {  body  { font-size:1.0em;  } }
@media all and (min-width: 600px)  {  body  { font-size:1.2em;  } }
@media all and (min-width: 700px)  {  body  { font-size:1.4em;  } }
@media all and (min-width: 800px)  {  body  { font-size:1.6em;  } }
@media all and (min-width: 900px)  {  body  { font-size:1.8em;  } }
@media all and (min-width: 1000px) {  body  { font-size:2.0em;  } }
@media all and (min-width: 1100px) {  body  { font-size:2.2em;  } }
@media all and (min-width: 1200px) {  body  { font-size:2.4em;  } }
@media all and (min-width: 1300px) {  body  { font-size:2.6em;  } }
@media all and (min-width: 1400px) {  body  { font-size:2.8em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.0em;  } }
@media all and (min-width: 1500px) {  body  { font-size:3.2em;  } }
@media all and (min-width: 1600px) {  body  { font-size:3.4em;  } }
@media all and (min-width: 1700px) {  body  { font-size:3.6em;  } }

What this in effect causes is that the font-size is adjusted to the available screen width. This adjustment is done in steps of 100px (which is finegrained enough for most purposes) and covers a maximum screen width of 1700px which I reckon to be amply (2013) and can by adding further lines be further improved.

这实际上导致了字体大小调整到可用的屏幕宽度。这个调整是在100px的步骤中完成的(这对于大多数的目的来说已经足够了)，并且覆盖了一个1700px的最大屏幕宽度，我认为这是一个很好的(2013)，并且可以通过添加更多的行来进一步改进。

A side benefit is that the adjustment of the font-size is occuring at each resize. This dynamic adjustment (because for instance the browser windows is resized) might not yet be covered by the Javascript based solution.

附带的好处是，在每个调整大小时，都要调整字体大小。这种动态调整(例如，浏览器窗口的大小调整)可能还没有被基于Javascript的解决方案所覆盖。

#3

I was looking for the same funcionality and found this answer. However, I wanted to give you guys a quick update. It's CSS3's vmin unit.

我在寻找同样的乐趣，找到了答案。但是，我想给你们一个快速更新。CSS3的vmin单位。

p, li
{
  font-size: 1.2vmin;
}

vmin means 'whichever is smaller between the 1% of the ViewPort's height and the 1% of the ViewPort's width'.

vmin的意思是“在ViewPort的高度的1%和ViewPort的宽度的1%之间，两者都比较小”。

More info on SitePoint

更多信息在SitePoint

#4

The answer that i am presenting is very simple, instead of using "px","em" or "%", i'll use "vw". In short it might look like this:- h1 {font-size: 5.9vw;} when used for heading purposes.

我给出的答案很简单，而不是使用“px”、“em”或“%”，我将使用“vw”。简而言之，它可能看起来像这样:- h1 {font-size: 5.9vw;}当用于标题目的时。

See this:Demo

查看演示:

For more details:Main tutorial

更多细节:主要教程

#5

Here's a SCSS version of @Patrick's mixin.

这是一个SCSS版本的@Patrick的mixin。

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

#6

-2

I have had a go to made my own answer to this, in a way I think is easier, please look here:

我已经有了自己的答案，在某种程度上，我认为比较容易，请看这里:

https://*.com/questions/32035079/text-resize-on-browser-resize-my-simple-answer/32035080#32035080

https://*.com/questions/32035079/text-resize-on-browser-resize-my-simple-answer/32035080 # 32035080

#1