同じページでスマホでの表示とＰＣでの表示

質問

同じページでスマホでの表示とＰＣでの表示で
文字のサイズを変えるスタイルシートを設定できますか？

例えば、
スマホなら
table[summary="table_A"] {
font-size: 0.85em;
}
でPCなら
table[summary="table_A"] {
font-size: 1em;
}
のようなことがしたいです。

回答No.2

h271015 · ベストアンサー

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

たとえば以下のように指定するとブラウザの幅が 768px～990pxの場合にのみ適用されるCSSを記述できます。

@media (min-width: 768px) and (max-width: 990px) {
・・・
}

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

お礼

ありがとうございます。

回答No.1

catpow

>>同じページでスマホでの表示とＰＣでの表示で
文字のサイズを変えるスタイルシートを設定できますか？

それがしばらく前から広まっている「レスポンシブ・ウェブデザイン」です。

お礼

ありがとうございます。