remとvwを利用した文字サイズの変更方法、vwを使ってレイアウトをほぼ完全に保つ。

※以下の方法は、効率的で生産性の高い方法を考えた方法で、ベストではありません。

いろいろレスポンシブなサイトを作ってきて、効率的で生産性の高いほうほうをさぐっていくうちに、以下のよううなレスポンシブの作りを良くします。(私はフロントエンド係)

  • PCファースト(どうしてもデザインがPC先行とか)
  • PXは基本pxで組む。
  • 文字サイズはhtmlに10pxを指定、bodyに14px、その他はremにて指定。
  • Tabletは基本PCと全く同じレイアウトでiPad縦まで引きずる(文字サイズ14pxまでならなんとか読める)
  • SmartPhoneはレイアウト変更して組む。

PCファースト

まずPCは何も考えずに基本pxで組んでいきます。注意する点は以下の２点だけ。

  • 文字サイズはhtmlに10pxを指定、bodyに14px、その他はremにて指定 >> 後々重要
  • スマホのレイアウトが実現可能なタグづけをする。

とそのままマークアップ、スタイリングします。

Tabletのレイアウト(基本PCと同じレイアウトにする)

まずどのように同じレイアウトを保つかというとvwの単位をうまく使います。
ブレークポイントを設定して単位のpxをvwに置換していくわけですが、まずPCのコンテンツの幅を1024pxだとした場合の値の求め方は、

vw = PCでの幅(px) / 1024 * 100

となります。これをすべて手動で計算は無いので、以下のようなfunctionを使います。

@function px2vwTablet($num){
    @return ($num/$breakPointTablet*100)vw
}

sassのコードは

.wrapper{
    width :  500px;
    @media screen and (max-width: 1024px) {
        width : px2vwTablet(500)
    }
}

とすると、PC〜Tabletのレイアウトを同一に保持できます。
次は文字サイズを基本PCではpx、タブレットではvwにする方法は以下の通り

html{
    font-size: 10px;
    @media screen and (max-width: 1024px) {
        font-size: px2vwTablet(10)
    }
}
body{
    font-size: 1.4rem;
}

このすべてpx > vwに置換していけばPCのレイアウトがそのままタブレットに引き継切できます。
SPについてはPCのレイアウトをそのままで引き継ぐわけには行かないので、通常のレスポンシブの組み方で組んで行ってます。(これでいいのか。。悩