css - 根据 div 大小调整字体大小

Question

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

Answer 1

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

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

可以在这里看到的解决方案（http://jsfiddle.net/uNF3Z/16/）使用以下 CSS 样式添加（利用@mediaCSS3 的查询）

@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;  } }

这实际上导致字体大小调整为可用的屏幕宽度。这种调整以 100 像素为步长（对于大多数用途来说已经足够细化了），并且覆盖了 1700 像素的最大屏幕宽度，我认为这是足够的（2013 年），并且可以通过添加更多线条来进一步改进。

附带的好处是每次调整大小时都会调整字体大小。这种动态调整（例如，因为浏览器窗口被调整大小）可能还没有被基于 Javascript 的解决方案覆盖。

Answer 2

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

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

vmin 表示“视口高度的 1% 和视口宽度的 1% 之间较小的那个”。

有关 SitePoint 的更多信息

Answer 3

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

结帐FitText（它确实在 IE 中工作，他们只是以某种方式将他们的网站搞砸了）或BigText。

FitText 将允许您相对于它所在的容器缩放一些文本，而 BigText 更多的是关于将不同文本部分的大小调整为容器内的相同宽度。

BigText 会将您的字符串设置为与容器的宽度完全相同，而 FitText 的像素不那么完美。首先将字体大小设置为容器元素宽度的 1/10。默认情况下，它不适用于所有字体，但它有一个设置允许您减少或增加重新调整大小的“力量”。它还允许您设置最小和最大字体大小。第一次开始工作需要一些摆弄，但效果很好。

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

对于那些使用 Angularjs 的人，这里是我制作的 FitText的Angular 版本。

---

这是一个 LESS 混合，您可以使用它来使@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 4

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

看到这个：演示

更多细节：主教程

Answer 5

这是@Patrick 的 mixin 的 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 元素，然后使用一个可以在其中使用 HTML 元素的 foreignObject 标记。下面给出了一个完成我的工作的示例代码片段。

<!-- 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元素内定义的，并且文本溢出样式被添加到那个/那些元素中。