レスポンシブの横幅

質問

スマフォとタブレット、PC …
レスポンシブデザインを考えるとき、それぞれ、
横幅のピクセル数はどれぐらいの範囲が良いのでしょうか…
ネットで調べても、"これだ !" という範囲がまったく分からないので、
教えて下さい。お願いします。
このサイトです。
↓
http://sumikaikan.jp/

回答No.1

DrFell · ベストアンサー

これだ！というものがないのです。デザインやターゲットにより適切な区切りが変わってきます。

ご提示のサイトを拝見しましたが、こだわる場所が違う様に思います。
粗っぽいですが、私なら、cssファイルは１つにします。リキッドレイアウトで、幅に応じてメニューの横の個数を変えるくらい（下記改造案）。

スマホはただ小さくすればいいというものではありません。メニュー等、指で押す場所は、リンク箇所が一つだけポツンとあるか、指で押せる充分な横と縦幅を必要とします。また、文字も大きめに表示するのが一般的です。でないと読めない豆粒の文字となったり、ちいさすぎて読むのに疲れます。

改造案ですが、おおざっぱですが以下の感じ。細かく作りこんでいませんし、既存の部分と重複がありますが、大意は伝わると思います。
head内のcssは<link rel="stylesheet" media="all" type="text/css" href="Norippy.css">のみに。
Norippy.css内の先頭行と最終行
つまり、
@media screen and (max-width: 1024px){
と}
を削除したうえで、最後に以下を追加してみてください。
body{
width:100%;
max-width:1024px;
}
div.top_logo {
background-image: url("site_logo.jpg");
height:0;
width: 100%;
background-size: 100% auto;
padding-top: 30%;
background-repeat: no-repeat;
}
div.main_menu {
width: 100%;
height:auto;
}
ul.menu {
padding: 0px;
overflow: hidden;
}
.main_menu .menu li{
width:25%;
}
.main_menu .menu li a{
background-color:#ffe8e8;
background-size: 100%;
background-image: url("sozai/menu_back_image.gif");
background-position:left center;
}
@media screen and (max-width: 500px){//ここの数値を変えることで、4列から２列への変換値を変更してください。
.main_menu .menu li{
width:50%;
}
div.main {
padding: 15px;
}
p{
font-size: 14px;
line-height: 1.7;
}
div.footer {
padding: 15px;
}
}

お礼

ありがとうございました !
別件の問題が発生したので、いじってますが、どうしてもできなかったらまた質問してみます。

補足

こんばんは。ありがとうございます。
そのように変えたところ、こんどはスライドショーのような画像がはみ出てしまいます。どうしたらその点を直すことができるのでしょうか ?
CSS をいじってしまい、混乱しています…
質問ばっかりで申し訳ないです…
http://sumikaikan.jp/

回答No.2

DrFell

div.top_logo だったのを差し替えられたのですね。そういうのを後出しというんですよ。2度手間なので、控えていただくのがマナーかなと思います。

#viewer {
margin: 0px auto;
width: 100%;
height: 0;
text-align: left;
overflow: hidden;
position: relative;
padding-bottom: 30%;
}
これを、全体にかかる場所にいれてください。

補足

おはようございます。
この方法ですと、画像が小さくなるに連れて、
画像内の文字も小さくなってしまいます。
そこで、画像から文字を取り除いて、画像表示エリアに大きく文字を表示させるにはどうしたら良いでしょうか…
これも "後出し" でしょうか…関連性のある質問なので、こちらに書きますが…もしこれがマナー違反であれば、ご指摘下さい。以降気をつけます。