パソコン/モバイルごとにCSSを適用する方法【WordPress】

2019年7月10日

こんな状況を想定

  • パソコン/モバイルのどちらかの画面だけにCSSを反映させたい
  • 追加CSSでデザインを変更したけど、 スマホだと崩れてしまった
  • スマホ/タブレット/PCなどデバイスに合ったpaddingやmarginを設定したい
  • 適用させたいCSSの数はそんなに多くない

方法

「@media screen」に続けて、「and ( )」 で 反映させたいデバイスの画面幅を指定し、「{　}」に CSSコードを入力するだけ。　

  • パソコンのみ反映
@media screen and (min-width: 980px) {
ここにCSSを入力
}　
  • タブレットのみ反映
@media screen and (min-width: 481px) and (max-width: 979px) {
ここにCSSを入力
}　
  • モバイルのみ反映
@media screen and (max-width: 480px) {
ここにCSSを入力
}　
  • パソコンとタブレットだけ or タブレットとモバイルだけ
/* パソコンとタブレット */
@media screen and (mix-width: 481px){
ここにCSSを入力
}　

/* タブレットとモバイル */
@media screen and  (max-width: 980px) {
ここにCSSを入力
}　

「max-width: 480px」は、画面幅が最大で480 pxの機器 ＝ 480 px以下のスマホなど。

逆に「min-width: 980px」は、最小で980 px ＝ 980 px以上のパソコンは 画面幅という感じ。

  • パソコンとタブレットだけ

画面幅はほとんどの機器があてはまる以下を基準に記載しています。

スマホ ：480 px 以下
タブレット ：768~980 px
パソコン：980 px 以上

参考：画面幅

スマホでも横に倒してみたりすると、480 px以上になります。パソコンでも画面の片方半分側でしか表示しない場合はタブレット相当の幅になったりします。

iPhoneでは、以下の画像が画面サイズの参考になります。CSSでは画面幅はpx（ピクセル）ですが、デバイス側ではpointsで表現していますので注意してください。

画像：引用元より一部抜粋　The Ultimate Guide To iPhone Resolutions

例えばiPhone Xは、
point：375 x 812
pixel：1125 x 2436
ですが、CSSで指定する横幅は375になります。

プログラミング