レスポンシブWeb 右側の表示が切れてます

　レスポンシブWebデザインのサイトを作っています。

　スマホの画面では右側の表示がきれてしまいます。
marginとpaddingは左に効いても、右には効きません。

　PCの画面では想定どおりに表示します。

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/common-l.css">
<link rel="stylesheet" href="css/common-s.css" media="only screen and (max-width:599px)">

　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用とスマホ用の両方の表示を
まともにするにはどうすればいいでしょうか？　心当たりがあればお答えください。

No.1 ベストアンサー 回答者： 96buibui 回答日時： 2013/10/23 15:36

「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を！

この回答へのお礼

教わったよう@media only screen and (min-width:1000px)を使ったところあっさり解決しました。
おかげで作業が進んでます。

ありがとうございました。

お礼日時：2013/10/23 22:35