使用w3.css响应文本大小

Question

我正在尝试使用w3.css让我的网站更有响应性(我知道它并不是每个人的最爱，但它似乎比试图让我自己的CSS在每个浏览器和设备上都能工作更简单)。

有没有一种优雅的方法可以用w3.css使小屏幕上的文字变小？我有一个标题，使用一个表行，5列，所有h3大小。在小屏幕上，我希望它是h4或h5，这样就都合适了。

我不想使用大众，否则它在大屏幕上会太大。我可以复制内容，并使用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>

Answer 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，但它是最好的解决方案。

Answer 2

你可以使用Bootstrap框架来响应，因为它更受欢迎，也更丰富。

对于响应式文本，您可以使用媒体查询或使用单位而不是像素。

您可以在此链接中找到一些关于css单元的有用信息：

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

你也可以从这里获得bootstrap框架：

http://getbootstrap.com/

下面是关于排版的bootstrap doucumentation：

https://getbootstrap.com/docs/4.1/content/typography/

Answer 3

你可以为它使用Bootstrap，这是一项新技术，你正在寻找的基本上是一个引导网格系统，它将根据你的需求完美地工作。万事如意！