文字回應下方的文字

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作為單位大小，分別是視口高度和視口寬度。 （ 視口大小的版式 ）

您可以發揮創意，也可以結合使用這些方法來獲得最適合您的解決方案。

如果您有興趣進一步研究網絡排版，還可以考慮模塊化比例和垂直節奏 ，但這是另一回事了。

我希望這將幫助您解決問題並選擇正確的解決方案。