みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

投稿日時 - 2013-10-23 12:56:34

QNo.8317282

困ってます

質問者が選んだベストアンサー

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

投稿日時 - 2013-10-23 15:36:43

お礼

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

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

投稿日時 - 2013-10-23 22:35:35

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問