テキストの下のテキストが反応する

Question

どのようにしてテキストを反応させることができますか？フォントサイズは、今の私のテキストはresponsive..my数字がお互いに反対しているではありません

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

this

を見てみましょう

これはブートストラップレスポンスデザインです。リンクグリッドシステムを読むだけで、テキストを反応させることができます。

Answer 3

残念ながら、上記の設定では、デバイス/ウィンドウのサイズを考慮する必要がないため、フォントは反応しません。 あなたのアプローチ（または少なくともあなたがそれを置く方法）は、フォント全体を反応させる要素としてフォントを取ります。 Luke Wroblewski explained it quite well back in '09

これを覚えれば、応答的なタイポグラフィを達成したいと思うようになります。これを実現するには、さまざまな解決策があります。さらに複雑なものを追加するときに、どちらが最も効果的であり、壊れないかを理解したい場合は、もう少し読む必要があります。いくつか以下に

非常に簡単に説明し、（少なくとも出発点として）あなたの読書の喜びのためのいくつかの参照、もちろん、すべてのこれらのソリューションは非常にそれも何を知ってください、メディアクエリを使用します。

1. フォントサイズの測定には%またはemを使用してください。これは、探しているものの最も基本的で即時の解決策です。 IMOは、長期的には維持するのが少し難しいですが、単純なウィジェット/コンポーネント（How to make your typography responsive）で動作する可能性があります。
2. ユニットサイズとして使用rems：これは調べてみる価値であり、それはその背後にある根本的な概念の理解のビットを必要とするかもしれない（Responsive typography with REMs: How to build a scalable typographic foundation in three steps）
3. 使用vhまたはvwユニットサイズとして、それは、ビューポートの高さとビューポートの幅でありますそれぞれ、 （Viewport Sized Typography）

これらの方法を組み合わせて使用​​すると、効果的なソリューションを実現できます。

もう少しウェブタイポグラフィを掘り下げたい場合は、modular scale and vertical rhythmも考慮に入れることができますが、これは別の話です。

私はこれがあなたの問題に対処し、適切な解決策を選ぶのに役立つことを願っています。