レスポンシイブwebデザインでPCとスマホのフォントサイズを分ける

シェアする

program003

WardpressのレスポンシイブwebデザインでPCとスマホのフォントサイズを調整する 2つの方法を紹介します。もちろん、両方で対応してもOKです。

フォントサイズには絶対サイズと相対サイズがある

まず、フォントサイズには絶対サイズと相対サイズがあります。 px(絶対サイズ)をem(相対サイズ)にします。絶対サイズゆえにサイズは思い通りになっていないことがあります。

スポンサーリンク

電子書籍のおすすめ比較

CSS3 の Media Queries(メディアクエリ)でわける

もうひとつはcss上で切り分ける定番の方法?です。

テンプレートによっては反映されないので、 !important;をつけてもいいでしょう。 cssはこちらです。装飾はそのままサイズだけ変えたい場合は次のようコードでいいでしょう。

@media screen and (max-width: 568px)
{
	h2 {
		font-size: 80% !important;
	}
}

iphone5に対応する場合は、480ではなく、568になります。 古い記事は縦(320) * 横(480)になっているため、注意しましょう。

動作確認する場合、再読み込みしたり、スマホのキャッシュをクリアすることを忘れずに。

スポンサーリンク

シェアする

フォローする

スポンサーリンク