Question

我做了这个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个盒子组成，中间有文本。我已经把它做成了这样的盒子，所以它们会随着屏幕的大小调整大小，所以它会一直保持在同一个地方。

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

如何调整文本大小以使整个页面的比例始终相同？
这是处理多种分辨率的合适解决方案吗？或者我应该在css中进行多次@media检查并为每种媒体类型设置多种布局？

Answer 1

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

我的回答是＆＃34;纯CSS3，不需要Javascript＆＃34; -solution：

这里可以看到的解决方案（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;  } }

这实际导致的是将字体大小调整为可用的屏幕宽度。这个调整是以100px（对于大多数目的来说已经足够精细）完成的，并且覆盖了最大屏幕宽度1700px，我认为这是充分的（2013），并且可以通过添加更多的线进一步改进。

另一个好处是每次调整大小时都会调整字体大小。基于Javascript的解决方案可能尚未涵盖此动态调整（因为例如浏览器窗口已调整大小）。

Answer 2

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

结帐时FitText（它确实可以在IE中运行，他们只是以某种方式投放了他们的网站）或BigText。

FitText将允许您缩放与其所在容器相关的文本，而BigText则更多地是将文本的不同部分的大小调整为容器内的相同宽度。

BigText会将您的字符串设置为容器的宽度，而FitText则不是像素完美。首先将font-size设置为容器元素宽度的1/10。默认情况下，它对所有字体都不能很好地工作，但它有一个设置，允许您减少或增加重新调整大小的“功率”。它还允许您设置最小和最大字体大小。第一次开始工作需要花一点时间，但确实很有效。

http://marabeas.io＆lt; - 现在在这里玩它。据我所知，BigText根本无法在我的上下文中工作。

对于那些使用Angularjs的人来说，这是我制作的Angular version 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);

Answer 3

我一直在寻找同样的功能，并找到了答案。但是，我想给你们一个快速更新。它是CSS3的vmin单元。

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

vmin表示ViewPort高度的1％和ViewPort宽度的1％之间的较小值。

More info on SitePoint

Answer 4

我提出的答案非常简单，而不是使用“px”，“em”或“％”，我将使用“vw”。简而言之，它可能如下所示： - h1 {font-size：5.9vw;} 当用于标题目的时。

请参阅：Demo

有关详情：Main tutorial

Answer 5

这是@ Patrick的混音的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);

Answer 6

我找到了一种根据 div 大小调整字体大小的方法，无需任何 JavaScript。我不知道它的效率有多高，但它可以很好地完成工作。

在需要的 div 中嵌入一个 SVG 元素，然后使用一个 foreignObject 标签，你可以在其中使用 HTML 元素。下面给出了完成我的工作的示例代码片段。

<!-- The SVG element given below should be place inside required div tag -->
<svg viewBox='0 2 108.5 29' xmlns='http://www.w3.org/2000/svg'>
    <!-- The below tag allows adding HTML elements inside SVG tag -->
    <foreignObject x='5' y='0' width='93.5%' height='100%'>
        <!-- The below tag can be styled using CSS classes or style attributes -->
        <div xmlns='http://www.w3.org/1999/xhtml' style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'>
            Required text goes here            
        </div>
    </foreignObject>
</svg>

所有的viewBox、x、y、宽度和高度值都可以根据需要改变。

可以在SVG元素内部定义文本，但是当文本溢出时，无法在SVG文本中添加省略号。因此，HTML 元素被定义在 foreignObject 元素中，并且文本溢出样式被添加到那个/那些元素中。

根据div大小调整字体大小

6 个答案: