使用 w3.css 的响应式文本大小答案

【问题标题】：Responsive text size using w3.css使用 w3.css 的响应式文本大小
【发布时间】：2018-05-27 19:49:33
【问题描述】：

我正在尝试使用 w3.css 使我的网站更具响应性（我知道这不是每个人都喜欢的，但它似乎比尝试让我自己的 CSS 适用于所有浏览器和设备更简单）。

请问有没有一种优雅的方法可以使用 w3.css 在小屏幕上缩小文本？我有一个使用单个表格行、5 列、所有 h3 大小的标题。在一个小屏幕上，我希望它是 h4 或 h5，所以一切都适合。

我不想使用 vw，否则它在大屏幕上会太大。我可以复制内容并将 w3-hide-small 用于其中一个并将另一个版本隐藏在中大屏幕上，但这似乎不是一个好习惯。或者，我应该使用媒体查询还是在 w3.css 中有方法？

<table class="w3-container w3-table">
 <tr>
  <td>
  <h2 id="date1"><b>title1</b></h3>
  </td>
  <td class="w3-black w3-center">
  <h3>title2</h3>
  </td>
  <td class="w3-center">
  <h3>title3</h3>
  </td>
  <td class="w3-center">
  <h3>title4</h3>
  </td>
  <td class="w3-center">
  <h3>title5</h3>
  </td>
 </tr>
</table>

【问题讨论】：

标签： html css w3.css

【解决方案1】：

你可以做两件事；既不使用 w3.css 但功能也很好；其中一个确实使用vw 作为一个单元，但应该可以解决

选项 1

你可以使用 @media screen and (min-width: any_size){}。像这样工作：

/* if the screen is wider than 500px set the font size to 80px */
@media screen and (min-width: 500px) {
  .dynamicallyScale {
    font-size: 80px;
  }
}
/*if the screen size is less than 499px set the font size to 80px */
@media screen and (max-width: 499px) {
  .dynamicallyScale {
    font-size: 30px;
  }
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<table class="w3-container w3-table">
 <tr>
  <td>
  <h2 id="date1" class="dynamicallyScale"><b>title1</b></h3>
  </td>
  <td class="w3-black w3-center">
  <h3 class="dynamicallyScale">title2</h3>
  </td>
  <td class="w3-center">
  <h3 class="dynamicallyScale">title3</h3>
  </td>
  <td class="w3-center">
  <h3 class="dynamicallyScale">title4</h3>
  </td>
  <td class="w3-center">
  <h3 class="dynamicallyScale">title5</h3>
  </td>
 </tr>
</table>

不用说，您还可以使用任何其他方式来定义大小，例如em 和% 然而，这种变化真的很突然，需要很多，我的意思是很多 min-width: 和 max-width: 语句看起来很流畅，所以可能需要一个完整的单独的 CSS 文件才能工作，一般来说，只是一个坏的编码练习。

选项 2

您可以使用vw 单位。这会根据视口宽度的大小（vw 代表）动态缩放文本大小。所以你可以做一些像这样的事情：

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<table class="w3-container w3-table">
 <tr>
  <td>
  <h2 id="date1" style="font-size:8vw;"><b>title1</b></h3>
  </td>
  <td class="w3-black w3-center">
  <h3 style="font-size:6vw;">title2</h3>
  </td>
  <td class="w3-center">
  <h3 style="font-size:4vw;">title3</h3>
  </td>
  <td class="w3-center">
  <h3 style="font-size:2vw;">title4</h3>
  </td>
  <td class="w3-center">
  <h3 style="font-size:1vw;">title5</h3>
  </td>
 </tr>
</table>

当然，除了我的示例之外，您还可以使用其他大小，但您应该看到，如果您调整窗口大小，文本大小会动态变化。虽然这不使用 w3.css，但它是最好的解决方案。

【讨论】：

【解决方案2】：

您可以使用 Bootstrap 框架进行响应，因为它更流行和更丰富。

对于响应式文本，您可以使用媒体查询或使用单位而不是像素。
您可以在此链接中找到有关 CSS 单元的一些有用信息：

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

您也可以从这里获得引导框架：
http://getbootstrap.com/

这里是关于排版的引导文档：
https://getbootstrap.com/docs/4.1/content/typography/

【讨论】：

【解决方案3】：

您可以使用 Bootstrap，它是一项新技术，而您正在寻找的基本上是一个 bootstrap 网格系统，它可以根据您的要求完美运行。万事如意！

【讨论】：