wordpressのCSSで気をつけること(メディアクエリ編)

スポンサーリンク

スマホとPCによってCSSを変えるのは必須

PCようにCSS書いてたらスマホでの表示がおかしくなる

体験談になりますが、このブログのリストの幅をPCようにガリガリCSSいじって変えてた少し前、スマホでの表示を確かめたらまあリストがおかしいことに。

CSSが原因であるのは確かで、PCようにCSSいじってたのでまあ当たり前という。
…比率(%)でCSS書いてたので、ぶっちゃけスマホでも問題ないだろうというのは油断でしたね。

メディアクエリ

CSSには特定の画面サイズ以上でそのコードを割り当てる方法もあります。
で、いままでのCSSを囲む形で書けばおkです。

@media screen and (min-width:960px){
  /*960px以上で適用する内容*/
}

2行目を消してその間に960px以上の画面のみに適応させるCSSを書けばおkです。

これで960px以下ではテーマ本来のCSS、960px以上にはカスタムCSSとなります。

みなさんもPCだけでCSSいじることもあると思いますが、スマホでのレイアウトにも気を使ってくださいね。