文本下方的文本响应答案

【问题标题】：Text below text responsive文本下方的文本响应
【发布时间】：2017-02-07 10:43:04
【问题描述】：

我怎样才能使我的文本响应。例如在桌面上

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

【问题讨论】：

你在做bootstrap吗？
看看stackoverflow.com/questions/39761791/…
如果不显示 HTML，您将得到的只是猜测。
另外，您拼错了字体名称。

标签： css responsive-design font-size

【解决方案1】：

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

html{
    font-size: 2vw;
}

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

【讨论】：

【解决方案2】：

看看this

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

【讨论】：

【解决方案3】：

不幸的是，通过上述设置，您的字体将永远不会响应，因为您没有考虑到设备/窗口的大小。您的方法（或至少您放下它的方式）将字体作为使整个事物响应的元素。我强烈建议继续并开始使用移动优先的方法，Luke Wroblewski explained it quite well back in '09

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

下面是一些非常快速的解释和一些参考，供您阅读（至少作为起点），当然，所有这些解决方案都使用媒体查询，所以一定要知道那是什么：

使用% 或em 测量字体大小，这是您正在寻找的最基本和最直接的解决方案。 IMO 从长远来看有点难以维护，但它可以用于简单的小部件/组件 (How to make your typography responsive)。
使用rems 作为单位大小：这值得研究，并且可能需要对其背后的基本概念有一点了解 (Responsive typography with REMs: How to build a scalable typographic foundation in three steps)
使用vh 或vw 作为单位大小，分别是视口高度和视口宽度。 (Viewport Sized Typography)

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

如果您有兴趣深入研究网络排版，也可以考虑modular scale and vertical rhythm，但那是另一回事了。

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

【讨论】：