[解決済み] CSSでレスポンシブフォントサイズを実現

質問

を使用してサイトを作成しました。 Zurb Foundation 3 グリッドを使用します。各ページには大きな h1 :

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

ブラウザのサイズをモバイルサイズに変更すると、大きなフォントが調整されず、大きなテキストに対応するためにブラウザが横スクロールを含むようになります。

で気づいたのですが Zurbファンデーション3 タイポグラフィ ページ例 ヘッダは、圧縮・伸張されることでブラウザに適応していきます。

私は本当に明白な何かを見逃しているのでしょうか？どうすればこれを実現できるのでしょうか？

どのように解決するのですか？

その font-size は、ブラウザのウィンドウサイズを変更しても、このように反応しません。代わりに、ブラウザのズーム/タイプサイズ設定に反応します。 Ctrl と + をブラウザのキーボードで一緒に入力します。

メディアクエリ

を使用することを検討する必要があります。 メディアクエリ を使用して、デザインが崩れたりスクロールバーが発生したりする特定の間隔でフォントサイズを縮小しています。

例えば、CSSの一番下にこれを追加して、デザインが崩れ始める場所の幅を320ピクセルに変更してみてください。

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

ビューポートのパーセンテージ長さ

を使用することもできます。 ビューポートのパーセンテージの長さ のように vw , vh , vmin と vmax . これに関するW3Cの公式文書には、次のように書かれています。

ビューポートパーセンテージの長さは、最初に含まれるブロックのサイズに対する相対的なものである。最初のブロックの高さまたは幅が変更されると、それに応じて拡大縮小されます。

同じくW3Cのドキュメントから、個々の単位は以下のように定義できる。

vw単位 - 最初に含むブロックの幅の1%に等しい。

vh unit - 最初に含まれるブロックの高さの1%に相当する値です。

vmin unit - vwとvhのどちらか小さい方に相当します。

vmax unit - vwまたはvhの大きい方に等しい。

そして、これらは他のCSSの値と全く同じように使用されます。

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

見ての通り、互換性は比較的良好です。 こちら . ただし、Internet ExplorerとEdgeの一部のバージョンでは、vmaxをサポートしていません。また、iOS 6および7では、vh単位で問題が発生しますが、iOS 8で修正されました。