レスポンシブデザイン？

質問

cssで
font-size: 0.85em;
にしていて、スマホで見ると文字のサイズはちょうどいいのですが
同じサイトをＰＣで見ると文字のサイズが小さすぎて見づらいです。

一つのサイトを二つの媒体（スマホ・ＰＣ）で見る際に
文字のサイズを変える場合は
レスポンシブデザインと言うのを学べばいいのでしょうか？

回答No.1

h271015 · ベストアンサー

そうですね。
レスポンシブデザインは様々な種類の機器(PCやスマートフォン、タブレット端末)や画面サイズに合わせて、自動的にページのデザインを変化させる技術手法を指しています。

CSSでは、メディアクエリという機能を利用することでレスポンシブにできると思います。
PC/スマホというデバイスごとに切り替えるのではなく、表示される画面の幅によって適用するCSSを制御する形になります。

たとえば以下のような形です。

@media (min-width:480px) {
/*　画面サイズが480px以下である場合、このスタイルを適用する　*/
・・・
}
@media (min-width: 768px) and (max-width: 990px) {
/*　画面サイズが768px～990pxである場合、このスタイルを適用する　*/
・・・
}

@media screen and (min-width:1024px) {
/*　画面サイズが1024px以上である場合、このスタイルを適用する　*/
・・・
}

スマホ・ＰＣの画面幅ごとに font-size の記述をすることで、文字のサイズを変更できると思います。

参考: https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=ja

お礼

回答頂きありがとうございました。