質問: レスポンシブWebデザインのサイトを作っています。 スマホの画面では右側の表示がきれてしまいます。 marginとpaddingは左に効いても、右には効きません。 PCの画面では想定どおりに表示します。 PC用のcommon-l.cssを使わずスマホ用のcommon-s.cssだけを使うと表示は正常 でmarginとpaddingも効きます。common-l.cssが影響しているのはわかりました。 ためしにPC用のwidthを削るとスマホ画面の表示は正常になりました。当然PC用 画面の表示はおかしくなりますが。 なお「width: 650px;」を「width: 72.22%;」にしても結果は同じです、 //// PC用 common-l.css ////////////////// #content{ float: left; width: 650px; ←この行を削るとうまくいきます background-color: #FFFFFF; } //// スマホ用 common-s.css ////////////////// p{width: 100%;} #content{ width: 100%; background-color: #FFFFFF; margin: 10px 50px 10px 10px; } 原因まではわかりましたが、対策がわかりません。PC用とスマホ用の両方の表示を まともにするにはどうすればいいでしょうか? 心当たりがあればお答えください。
回答: 「PC用」というか、「ブラウザの横幅が広い」状態で見る、と想定しているならば、 width: 650px;もメディアクエリ分けしてあげたら良いのではないでしょうか。 @media only screen and (min-width:1000px){ #content{ width: 650px; } } とか。 min-widthなのか、min-device-widthなのかは是非お好みで。px数もお好みで。 記述内容の詳しい説明は「メディアクエリ 幅」とかで検索したら山ほど出てきます。多分。 もしくは、そもそもcommon-l.cssはスマホ端末では読み込みたくない、 というのであれば、そちらの読み込みをmin-widthで振り分けてあげるとか。 よきcssを!