☰

CSS でのレスポンシブフォントサイズ 質問する

tag-icon • tag-icon css responsive-design zurb-foundation font-size
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 Foundation 3のタイポグラフィに気づきましたサンプルページヘッダーは圧縮および展開される際にブラウザに適応します。

何か非常に明白なことを見逃しているのでしょうか? これを実現するにはどうすればいいでしょうか?

ベストアンサー1

ems、pxs、pts の代わりにビューポート値を使用できます。

1vw = ビューポート幅の 1%

1vh = ビューポートの高さの 1%

1vmin = 1vw または 1vh のいずれか小さい方

1vmax = 1vw または 1vh のいずれか大きい方

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

CSS-Tricksより:ビューポートサイズのタイポグラフィ

おすすめ記事