Question

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

是否有一种优雅的方法可以使用w3.css在小屏幕上缩小文字？我有一个标题使用单个表行，5列，所有h3大小。在一个小屏幕上我喜欢这个是h4或h5，所以它都适合。

我不想使用vw，或者在大屏幕上它太大了。我可以复制内容并使用w3-hide-small作为一个并在中型和大型屏幕上隐藏其他版本，但这看起来不是很好的做法。或者，我应该使用媒体查询还是在w3.css中有办法？

Queryable.Any

Answer 1

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

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

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

你也可以从这里获得bootstrap框架：
http://getbootstrap.com/

这是关于排版的自助式计算：
https://getbootstrap.com/docs/4.1/content/typography/

Answer 2

你可以使用Bootstrap作为一种新技术，你正在寻找的基本上是一个引导网格系统，可以根据你的要求完美地工作。一切顺利!!

Answer 3

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

选项1

你可以用 @media screen and (min-width: any_size){}。这是这样的：

＆＃13;

/* 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;
  }
}

＆＃13;

<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>

＆＃13;

毋庸置疑，您还可以使用任何其他定义尺寸的方式，例如em和% 但是，这种变化非常突然，需要很多，我的意思是很多min-width:和max-width:语句看起来很平滑，所以可能需要一个完整的单独的CSS文件才能工作，一般来说，只是一个糟糕的编码实践。

选项2

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

＆＃13;

<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>

＆＃13;

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

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

3 个答案:

选项1

选项2