レスポンシブのデザインについて

質問

ポスポンシブのデザインを設計する際はどのように書いていますか？
iPhone5系などの320×568を基準に作っていますか？
それともシェアが多い375×667を基準ですか？

デザイナーからspのフレームワークをもらったのですが、基準が750pxになっており、750pxではパーフェクストピクセルで表示できるのですが、320×568ではやはりレイアウトが崩れてしまいます。
なぜかというとそもそもボックスがwidth:600pxとなっていてiPhone系ではレイアウトが崩れます。
今回はpcとタブレット兼スマホでブレイクポイントを作っていますので、この場合では750pxではなく画面サイズが小さいスマホ(320px)を基準に作るべきではないのですか？

320px基準であれば750pxに画面幅が広がっても拡大されるだけなのでレイアウトは崩れないと思うのですが、、、
レスポンシブを初めて作るので勝手がわからず、意味不明な質問かもしれませんが、回答よろしくお願いします。

回答No.2

hue2011

意味不明ですね。

レスポンシブというのを理解していますか。

あれは、表示レイアウトを調整するものであって、表示するものを拡大するもんじゃないのですが。

<div>だの<span>だので囲んでいる表示部分が、一種のユニットですね。そのユニットを横に並べるか、縦にするか、を、受信している端末の表示サイズに合わせて調整できる、というのがレスポンシブの実態です。

つまり、そのユニット部品を横に並べる書き方をしていると、ブラウザの表示画面をはみ出すようなら勝手に改行をしてそこから下に落とすということをするんです。

たかがそれだけのことです。

それを、うまくブロック化できなくて変なHTMLの生の書き方でレイアウトをしていると無残なことになるわけです。

320×568が基準もなにもないです。自分が想定している状態に合わせるためにCSSの設定を変えればいいだけじゃないですか。

デザイナがどう書こうとも、自分はこのレイアウトを想定しているというだけでたかがCSSで1行でしょう。なぜ基準だとか正しい間違っているというのか意味不明なんです。

自分が想定しているところに合わせようと調整すればいいだけです。

しかし、仕様の画面サイズなんかにぴったり合わせると考えないほうがいいだけです。それをやると思ったことと実際表示が齟齬をきたす場合があります。どこで改行したいと考えるかは、HTMLの仕様じゃなくて、ブラウザが考えることですから。だから多少遊びを作って設定をすればいいんです。

補足

回答ありがとうございます。
"それを、うまくブロック化できなくて変なHTMLの生の書き方でレイアウトをしていると無残なことになるわけです。"とありますが、
たしかに画面サイズが小さくなるとブロックがカラム落ちし、デザインが崩れてしまいます。
これはHTMLの書き方が甘いのでしょか？

また意味不明な質問かもしれませんが、750pxで表示するデザインを渡されてボックスサイズが600pxのものが縦に3つ並んでいます。
A
B
C
このようになっています。
ウィンドウサイズを320pxに縮めた時は600pxのボックスが下に伸びると思います。その際にAのボックスの下部がBにかかってしまいデザインが崩れてしまいます。
ですが320pxのデザインでボックスサイズが200pxのものが3つ、
a
b
c
となっていれば750pxにサイズを大きくしてもウィンドウサイズに合わせて横に伸びて下のボックスには干渉しないですよね？

少し長くなりましたが、
私が言いたいのは750pxのデザインで横幅が600pxのボックスがあるのにもかかわらず、320pxで表示した時も750pxを同じデザインになるようにパーフェクトピクセルで表示しろという指示に疑問が浮かんだのです。

回答No.1

h_ishikawa

レスポンシブデザインを根本から誤解されているようです。
回答は他の方にお任せしますが、素朴な疑問として。

＞320px基準であれば750pxに画面幅が広がっても拡大されるだけなので

「750px基準であれば320pxに画面が狭くなっても縮小されるだけなので」
とは思わなかったのですか？