CSSカスタマイズについて。

Question

現在wordpressでブログを書いています

ブログをカスタマイズしたくてcssを色々いじっているのですが、
PCで綺麗に反映されても、スマホからサイトを見ると違和感ができます。

例えば、メインコンテンツとテキスト(本文)の幅を調整したくて以下のコードを反映させたら
スマホサイトでは余白ができすぎて違和感がありました。

そこで質問なのですが、PCとスマホを別々に違う条件で反映させるにはどのようなコードを書けばいいですか？

.main-conts .section-wrap {
padding: 2em;
}

Comments

[Lhankor_Mhy]

メディアクエリを使ってください。https://teratail.com/questions/114737 この質問が参考になると思います。

Answer 1

一般的にはメディアクエリを利用しますが、
この場合には閲覧環境の画面幅での判定となります。

/* スマホ用 */
.main-conts .section-wrap {
    padding: 2em;
}

/* PC 用*/
@media screen and (min-width:480px) {
    .main-conts .section-wrap {
        padding: 1em;
    }
}

wpでしたら wp_is_mobile() という関数も用意されていますので
そちら利用すると、ユーザーエージェントで判定してスタイルを切り分けることが出来ます。