レスポンシブ対応の「font-size」の指定について

Question

今スマホ向けのLPを作っています。

そこで下記のような
![

ものを作りたいと思っています。

二重になっている丸はIllustratorで作りpngにしました。
（この画像は「special_circle.png」です。）

そしてこれを表現するためにこのようなコーディングをしました。

<div id="allSpecial">
		<div class="special1">
			<img src="images/special_circle.png">
				<div class="spInner">
					<h2>タイトル</h2>
					<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
				</div>
		</div>
</div>

そしてcssはこのようにコーディングしました。

.special1{
	position: relative;
}
#allSpecial img{
	width: 100%;
}
.spInner{
	position: absolute;
	width: 90%;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
#allSpecial h2{
	text-align: center;
	margin: 0 auto;
	padding-top: 40px;
	color: #EC5D57;
	border-bottom: 2px solid #EC5D57;
	width: 60%;
}
#allSpecial p{
	width: 70%;
	margin: 0 auto;
	padding-top: 20px;
	font-size: 90%;
	color: #EC5D57;
	}

スマホのデバイスによって文字サイズが変化するようにfont-sizeを「%」指定しているのに、、
スマホのデバイスによって文字の大きさが変わりません。

なので例えばiPhone6でいい感じのサイズで作り、iphone5で見てみると赤い丸からテキストがはみ出していたり、iphone6plusで見ると全然丸が埋まっていなかったりします。。

初歩的な部分かもしれませんが、どうか教えていただけると嬉しいです。

よろしくお願い致します。

Answer 1

%で大きさを指定するというよりは、メディアクエリを使いましょう。
それにより、画面幅が○○px以下の場合のフォントサイズは○○にする、と言ったような製作者の任意の指定ができます。これですと、px指定でも良いです。

• レスポンシブウェブデザインを作るときのMedia Queries(メディアクエリ)の一般的な書き方2パターン

Comments

[ShunYoshizawa]

回答ありがとうございます。

それでは、
スマホのデバイスごとに微妙にメディアクエリを使っていくということでしょうか？

Answer 2

font-sizeを%指定した場合、その基準となるものは親要素で設定されている文字サイズとなります。
親要素のfont-sizeが16px、子要素のfont-sizeが87.5%であれば14px相当です。
そしてそのサイズは、スクリーン幅とは何の関連もないため、
画像と同じような感覚で画面幅に合わせてデバイステキストの大きさを拡縮することは%指定ではできません。

デバイステキストの大きさを画面サイズに連動する形で変化させたいのであれば、
「vw」という単位を使いましょう。「vw」の基準は「viewport-width」ですので、vwで指定された文字は
画面幅が大きければ大きく、画面幅が小さければ小さく表示されます。

ただし「vw」はまだ使える環境が限られます。
もしどのような環境でもvw指定したのと同じように画面幅に合わせて自動で文字サイズを拡大縮小させたいなら
「FitText」のようなjQueryプラグインを利用するとよいと思います。

Comments

[ShunYoshizawa]

回答ありがとうございます。

「vw」が使える環境が限られるというのはブラウザによって変わってしまうということでしょうか？

[aKusano]

はい、そうです。
IE8以下、Android4.3以下でvwは使えません。
http://caniuse.com/#search=vwに対応表がありますので詳細はそちらで確認してください。

Answer 3

レスポンシブWebデザインの作り方（簡単設定方法）
参考にしてください。

img{
max-width: 100%;
height: auto;
width /***/:auto; 
}

Comments

[ShunYoshizawa]

回答ありがとうございます！！！