レスポンシブでコーディングする場合にPC用とスマートフォン用の2種類のデザインしかなく、タブレット用のレイアウトをどうするか迷うことがあります。PC用のデザインのままでは入りきらないし、かといってレイアウトを細かく変更するとコストがかかってしまいます。
この問題を簡単に解決するため、タブレットサイズの時はPC用のレイアウトのまま縮小表示するという方法をご紹介します。
ポイントは2つです。
（１）基準となる文字サイズを指定する
html {
font-size: calc(100vw / 75);
}
@media print, screen and (min-width: 768px) {
html {
font-size: calc(100vw / 100);
}
}
@media print, screen and (min-width: 1000px) {
html {
font-size: 62.5%;
}
}2行目 font-size: calc(100vw / 75);
スマートフォン用のデザインデータ幅 ÷ 10
例）デザイン幅750pxの場合 → 75
6行目 font-size: calc(100vw / 100);
縮小・拡大表示の上限ブラウザ幅 ÷ 10
例）1000pxの場合 → 100
9行目 @media print, screen and (min-width: 1000px) {
縮小・拡大表示の上限ブラウザ幅（6行目で決めた値）
※1000px以上、コンテンツ幅（例えば1200px）まではリキッドで対応します
（２）単位をremで指定する
<h1 class="title">つれづれなるまゝに、日暮らし</h1>
<p class="text">私は今もしその下宿院というののために出ないな。</p>
<div class="img"><img src="img01.jpg" width="600" height="400" alt=""></div>.title {
margin-bottom: 3rem;
font-size: 3.4rem;
line-height: 4rem;
}
.text {
margin-bottom: 3rem;
font-size: 2.8rem;
line-height: 5rem;
}
@media print, screen and (min-width: 768px) {
.title {
font-size: 2rem;
line-height: 3rem;
}
.text {
font-size: 1.4rem;
line-height: 2.8rem;
}
.img {
max-width: 60rem;
margin: 0 auto;
}
}デザインデータの文字サイズが34pxの場合は、font-size: 3.4rem;と指定します。数値を10分の1にしてpxをremに変えるだけです。その他、margin,padding,max-width,positionなどの数値も同様です。
デモページも用意しましたので参考にしてください。
最後に、この方法はタブレットを縦にして見ている人にとって文字が小さくなるというデメリットがあります。ユーザーがピンチインしたり横にしたりする必要があるかもしれませんので、縮小表示されるのはNGという案件では使用できません。タブレットは要件に入っていないけれども表示崩れを簡単に避けたいという時などに使ってみてください。