如何使用 CSS 将字体缩放到视口，同时保持两列布局？答案

【问题标题】：How do I use CSS to scale the font to the viewport while maintaining a two-column layout?如何使用 CSS 将字体缩放到视口，同时保持两列布局？
【发布时间】：2019-09-13 03:28:57
【问题描述】：

我有这样的 HTML 和 CSS 代码：

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="example.css"/>
</head>

<body>
    <div id="main">
        <span class="alignleft">First event, including a few words of description</span>
        <span class="alignright">Date of first event</span>
    </div>
</body>
</html>

CSS：

html {
    overflow-y: scroll;
    max-width: 800px;
    margin: auto;
}

body {
    background-color: #fff;
    color: #000;
    font-family: sans-serif;
    padding: 0;
    margin: 0;
}

#main {
    margin: 0;
    max-width: 50em;
    padding: 1.5em;
}

span.alignleft {
    float: left;
    width:80%;
    text-align:left;
}

span.alignright {
    float: left;
    width:20%;
    text-align:right;
}

在一个大窗口/视口上，这会产生像这样的两列布局的文本（这是我想要的）：

在较小的窗口/视口上，例如移动浏览器，这会产生如下文本：

这里没有很多文本，所以我希望字体尽可能地根据视口而不是换行（这在大多数视口上应该是可能的，因为再一次，没有此处文字不多）。

但是，如果我在 CSS 中添加 font-size:2vw 元素，例如

html {
  overflow-y: scroll;
  max-width: 800px;
  margin: auto;
}

body {
  background-color: #fff;
  color: #000;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

#main {
  margin: 0;
  max-width: 50em;
  padding: 1.5em;
}

span.alignleft {
  float: left;
  width: 80%;
  text-align: left;
  font-size: 8vw;
}

span.alignright {
  float: left;
  width: 20%;
  text-align: right;
  font-size: 2vw;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <link rel="stylesheet" type="text/css" href="example.css" />
</head>

<body>
  <div id="main">
    <span class="alignleft">First event, including a few words of description</span>
    <span class="alignright">Date of first event</span>
  </div>
</body>

</html>

这会杀死两列布局和其余格式。我该如何解决这个问题？

【问题讨论】：

为什么左边栏有8vw？另外，我建议您以 sn-p 而不是屏幕截图的形式展示您的代码。
@billynoah 我不确定你的意思。没有任何代码显示为屏幕截图。只有输出包含在屏幕截图中。
在“如何解决这个问题”字样的正上方有一个屏幕截图 - 而不是向我们显示屏幕截图，只需添加一个 sn-p 以便我们可以看到标记在浏览器中的呈现方式，而不是在图像中。
你有没有想过做media queries 并调整布局本身以适应不同的浏览器尺寸？比如改变宽度等等。
@billynoah 哦，我明白你的意思了。我没有意识到 sn-ps 可以模拟不同的视口/浏览器，但我会尝试让它工作。

标签： html css viewport font-size

【解决方案1】：

您可以像以前一样将fw 单位用于font-size，但您只需使用较小的值。从font-size: 0.5vw 开始，慢慢更改值，尝试不同的值以获得所需的结果。

记住：一个vw 是屏幕宽度的百分之一，所以对于1000px 宽的屏幕，8vw 表示80px 字体大小！

【讨论】：

【解决方案2】：

您可以添加所需的font-size:2vw 以随视口以及其他一些规则进行缩放：

设置包装器和跨度以呈现为表格和单元格
将跨度上的white-space 设置为nowrap

这似乎可以满足您的要求，但在大视口上呈现有点奇怪。一种改进的方法可能是使用至少一个媒体查询并仅在较小的屏幕上设置动态字体大小。

html {
  overflow-y: scroll;
  max-width: 800px;
  margin: auto;
}

body {
  background-color: #fff;
  color: #000;
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

#main {
  margin: 0;
  max-width: 50em;
  padding: 1.5em;
  display: table;
  width: 100%;
  box-sizing: border-box;
}

#main>div.row {
  display: table-row;
}

span.alignleft {
  text-align: left;
}

span.alignright {
  text-align: right;
}

span.alignleft,
span.alignright {
  white-space: nowrap;
  display: table-cell;
  padding: 0 5px;
}

@media only screen and (max-width: 768px) {
  #main {
    padding: .5em;
  }
  span.alignleft,
  span.alignright {
    white-space: nowrap;
    display: table-cell;
    font-size: calc(6px + 1.5vw);
  }
}

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
  <link rel="stylesheet" type="text/css" href="example.css" />
</head>

<body>
  <div id="main">
    <div class="row">
      <span class="alignleft">First event, including a few words of description</span>
      <span class="alignright">Date of first event</span>
    </div>
    <div class="row">
      <span class="alignleft">First event, including a few words of description</span>
      <span class="alignright">Date of first event</span>
    </div>
  </div>
</body>

</html>

【讨论】：

+1 这看起来很接近我想要做的，谢谢。我应该在我最初的问题中加入一个更好的例子，但这如何处理多行文本？我不能将堆栈 sn-ps 放入 cmets，但是 in a Fiddle，它将所有内容都转储到一行。
@MichaelA - 我已经更新了我的答案（1）演示如何在这样的伪表格布局中创建行，以及（2）改进的动态字体大小，防止字体变成在较小的视口尺寸下完全不可读。我认为这仍然有点问题，但至少应该让你有一些想法。