cssについて。PCとスマホのレスポンシブについて教えてください

Question

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

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

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

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

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

Comments

[kei344]

https://teratail.com/questions/115079 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、どちらかを削除されるよう運営に連絡されることをお勧めします。https://teratail.com/contact/input

Answer 1

デバイス別にCSSを分けるには大きく分けて三つ方法があります。

・CSSのメディアクエリを使い、デバイスサイズ別にCSSを反映させる。
・JavaScriptによって、ユーザーエージェントやスクリーンサイズでデバイスを判別して、読み込むCSSを変更する。
・PHPなどのサーバーサイドで、ユーザーエージェントなどを使いデバイスを判別して、読み込むCSSを変える

ご質問が、レスポンシブについてとのことなので、
CSSのメディアクエリを使うのがよろしいかと思います。
下記の感じで、デバイス別でCSSを分けます。

.hoge {
  padding: 2em;
}

@media screen and (max-width:480px) {
  /*　画面サイズが480px以下のデバイスはこっちが優先される　*/
  .hoge {
    padding: 1em;
  }
}

あとは、適用させたいデバイス別に、地道にサイズを変えて増やしていきます。

ただ、それだと限りがあると思うので、
あるサイズ以下（例えば、640px以下）の場合は、2vwなど、v系の単位を使うと、
デバイスが変わっても、イーブンなサイズをとれるかと思います。