文字回应下方的文字

Question

如何使我的文本响应。 例如在台式机上

--------------------------------
   12  0  12   15              |
                               |
                               |
                               |
--------------------------------

如果字体大小很大，我想在手机上走下去

------
  12 |
  0  |
  12 |
  15 |

现在我的文字没有反应。.我的电话号码互相对立。

这是我正在使用的代码：

.hasCountdown {
    text-shadow: transparent 0px 1px 1px;
    overflow: hidden;
    padding: 30px;
    /*cursor:pointer;*/
}

.countdown_rtl {
    direction: rtl;
}
.countdown_holding span {
    background-color: #ccc;
}
.countdown_row {
    clear: both;
    width: 100%;
    padding: 3px 2px;
    text-align: center;
}


.countdown_show4 .countdown_section {
    width: 24.5%;
}


.countdown_section {
    display: block;
    float: left;

    text-align: center;
    line-height: 200%;
    margin:3px 0;
    font-family:'halvetica_light';
}
.countdown_amount {
    font-size: 450%;
}


.countdown_amount_red
{   
    color:red;
}

Answer 1

您可以尝试简单地添加以下内容（因为您尚未提供用于测试的HTML）

html{
    font-size: 2vw;
}

h1{
    font-size: 1em; /*Change h1 or size to fit requirements */
}

Answer 2

看看这个

这是引导响应设计。 只需阅读链接网格系统，您就可以使文本响应。

Answer 3

不幸的是，使用上述设置，您的字体将永远不会响应，因为您没有考虑设备/窗口大小的任何内容。 您的方法（或至少将其放下的方法）将字体作为元素，使整个事物都具有响应能力。 我强烈建议继续使用移动优先方法， Luke Wroblewski早在09年就对其进行了很好的解释

一旦解决了这个问题，您就会开始意识到自己想要实现响应式排版 。 为了实现这一点，您有不同的解决方案，如果您想了解哪种方法最有效并且在开始增加更多复杂性时不会中断，那么可能需要多读一些书。

下面提供了一个非常快速的解释和一些有关您的阅读乐趣的参考（至少作为起点），当然，所有这些解决方案都使用媒体查询 ，因此请确保也知道这是什么：

1. 使用%或em表示字体大小，这是您正在寻找的最基本，最直接的解决方案。 IMO从长远来看很难维护，但是它可以用于简单的小部件/组件（ 如何使排版响应 ）。
2. 将rems用作单位大小：这值得研究，可能需要对其背后的基本概念有一些了解（ 带有REM的响应式排版：如何分三步构建可扩展的排版基础 ）
3. 使用vh或vw作为单位大小，分别是视口高度和视口宽度。 （ 视口大小的版式 ）

您可以发挥创意，也可以结合使用这些方法来获得最适合您的解决方案。

如果您有兴趣进一步研究网络排版，还可以考虑模块化比例和垂直节奏 ，但这是另一回事了。

我希望这将帮助您解决问题并选择正确的解决方案。