レスポンシブのサイトを作るにあたって

Question

今、キャンペーンサイト１Pのでコーディングをしています。

レスポンシブ対応でコーディングをしてくれといわれました。
私は、ブレイクポイント640px以上はPC表示ができればいいだろうといった認識で製作しておりますが、通常の場合、皆さんどこまで対応していますか？

Answer 1

受託でコーディングだけやってると、
デザイナーさん側から渡されるスマホ用カンプが640pxだったりするので
素材の関係もあって必然的に640px以下スマホ、それ以上PCレイアウトという風に
なることが多いです。

が、641px〜800pxくらいの画面サイズでPCレイアウトがうまく表示されるかどうかは
コンテンツ次第なので、そのへんはケースバイケースです。

スマホ用のレイアウトは最初から横幅可変を意識したレイアウトになっているでしょうから
正直640pxでも768pxでもさほど困ることはないですが、
PCレイアウトのほうが横幅可変を意識したデザイン・レイアウトになっているかどうかは
まちまちなので、むしろ中間サイズの画面幅の時にPCレイアウトをどう見せるかの方が悩ましいですねー。

Comments

[jojo3]

そうなんです。スマホとPC用のデザインのみしかもらえないことが多いので、皆さんどこまで対応しているのか気になりました。ご丁寧にありがとうございます！

[aKusano]

あくまで私の場合はですが、
原則641px〜はPCレイアウトを伸縮させて対応しています。
その上でコンポーネント単位でどうしてもそのまま伸縮させたのでは
読みづらい部分だけコーダーの判断でカラム落としで対応し、
デザイナ確認でどうしても気になるところだけ指示をもらう形にしています。

また、キャンペーン系のグラフィカルなコンテンツなど、デザインカンプ上の幅から
ちょっとでも狭くなるとどうにもレイアウトが崩れるようなものの場合は、
少し大きめの768px以下をスマホレイアウトで可変対応し、
それ以上の場合はPCレイアウト固定（伸縮しない）として対応したこともあります。
受託で中間サイズ用のデザインカンプがもらえない場合は
そんな感じで対応するのが現実的なんじゃないかなと思いますね。。

Answer 2

このサイトは参考になりますか？
Teratailの検索で「ブレイクポイント レスポンシブ」でも色々とみなさまのお知恵の集大成が拝見できます。

Comments

[jojo3]

ご丁寧にありがとうございます！参考になります。