WebDesign Dackel

Sassでフォントサイズをレスポンシブ対応させる荒技

Sassでフォントサイズをレスポンシブ対応させる荒技

Hatena0
Google+0
Pocket0
Feedly0

レスポンシブなサイトを作成する時に、フォントサイズを画面幅に応じて変える必要がある場合はどのように実装しているでしょうか?
僕はサイズをremで指定して、変化を付けたい幅にブレイクポイントを設けてhtml要素のフォントサイズを指定しています。

ただ、上記の方法ではブレイクポイントとブレイクポイントの間では変化が付きません。勿論それで構わないのですが、Sassを使ってもっと細かく変化を付けられないかなぁと思ったのでサンプルを作ってみました。

サンプル

何が起きてるの?

サンプルページを開いて、ブラウザの幅を動かして見ると画面の幅に対してフォントサイズが変化しているのが分かるかと思います。

実装方法

やっている事は単純で、Sassのfor文を使って大量のメディアクエリを作成するという荒技で、ベースとなるフォントサイズ、変化を付けたい画面の最大幅と最小幅から、メディアクエリを作成しているだけです。

下記は使用したSassのコードです。

// ↓ ループを使用して、最小画面サイズから最大までの基底となるフォントサイズのメディアクエリを出力
$max-width:640;
$min-width:320;
$step:10;
$font-size:14px;

html { font-size:$font-size; }

@function fs( $size, $context, $base:12, $unit:px ){
     @return #{$size/$context*$base}#{$unit};
}

@for $i from 1 through $step {
     $n:$min-width + ( ( ( $max-width - $min-width ) / $step ) * $i );
     @media screen and (min-width:#{$n}px){
          html {
               font-size:fs($n, $min-width);
          }
     }
}

上記のコードを使って、CSSをコンパイルしてみると大量のメディアクエリが….。

@media screen and (min-width: 352px) {
  html {
    font-size: 13.2px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 14.4px;
  }
}
@media screen and (min-width: 416px) {
  html {
    font-size: 15.6px;
  }
}
...まだまだ続きます

サンプルのコードではサイズを10分割した文のメディアクエリを設定していますが、$stepの値を大きくすればもっともっと細かく変化が付くようになります。笑

実際の制作では、ここまでフォントサイズを厳密に変化させる事はないかと思いますが、こういう事も出来るかも!っていうノリで書いてみましたので、参考程度に。。

追記:

そもそも、デザインの比率に合わせたいなら-webkit-text-size-adjustの値をいじることが一番手っ取り早いよねと思ったのでした。

-webkit-text-size-adjust:auto;

上記にも書きましたが、お遊び程度に。