こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

解決済みの質問

レスポンシブデザイン?

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

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

投稿日時 - 2015-12-22 06:54:08

QNo.9099530

暇なときに回答ください

質問者が選んだベストアンサー

そうですね。
レスポンシブデザインは様々な種類の機器(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以上である場合、このスタイルを適用する */
・・・
}

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

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

投稿日時 - 2015-12-22 16:10:37

お礼

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

投稿日時 - 2015-12-29 23:36:58

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(1)

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-