質問: ### レスポンシブサイトでのブレイクポイントの決め方、cssの記述順について 現在、自社の既存のECサイトのリニューアルを行なっています。 ブランディング会社から、デザインデータは750pxで納品しますという話があり、 サイトへのアクセスのシェアから見てもiPhone6〜Xの横375pxが一番多かったので、 その方向で行こうと考えています。 ただ、iPhoneSEのアクセスもそれなりにあるので、SEで崩れるのは避けたいです。 モバイルファーストでレスポンシブのcssを一から組むのが初めてのため、 ブレイクポイントの設定をどうしたらいいのか迷っています。 ブランディング会社はいくつもの大手の企業を手掛けているのですが、webの案件は初めてらしく、 この辺りの質問には回答をいただけませんでした。 以下のような案を考えてみたのですが、ベストな方法をご教授いただけると幸いです。 ``` //A案 デザインの基準が750pxであるので、cssも375pxを基準にした記述を一番上に書く。 SE用の記述は別途ブレイクポイントを設定して下部に記述する。 //B案 SEを基準にした記述を一番上から書いていき、375pxのブレイクポイントを設定する。 (この場合、デザインデータも640pxで納品してもらうかたちにするべきでしょうか?) ``` どうぞよろしくお願いいたします。
回答: スマホ用のデザインデータはいつも750pxでもらいますが、 320px幅でもおかしくならないように考慮して組んでいる者です。 個人的にはA案に近いかたちで作ってます。 ただし、完全にSE向けにスタイル指定を分けてしまうわけではありません。 幅等の指定は原則として相対単位で指定して、幅が狭くなってもそれなりに ちゃんと表示されるようにしておくのが前提で、どうしても収まりきらない部分だけを 個別に@mediaで差分調整するようにしてます。 375px幅デザインをベースにしながらでも、組む時に ・多段組の部分はカラム落ちしないように注意 ・どうしてもカラムが狭くなりすぎる場合は実装判断でカラム数を減らす ・デバイスフォントは原則折返し表示を許容(折り返した場合のデザインに配慮) ・どうしても自動折り返しさせたくないデバイスフォントは小さい画面だけvw単位でフォントサイズを指定 といった点に注意しながら随時幅を狭くして表示確認しながら作れば、 320px対応も同時にやることは不可能ではないです。 まぁ面倒くさいですけどね。 ぶっちゃけ320pxにちゃんと対応するならデザイン段階からそのつもりでデザインしてもらうのが 本当は一番いいのですが、無理な場合は上記のような形でコーダー判断で対処した上で、 後でデザイナーにどうしても気になるところだけ修正指示をもらうようにしてます。 参考までに...。