css - 文字下方的文字响应

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