レスポンシブ対応が会社によってやり方が違い困っています。

Question

コーディングルールは会社によって違うと思うのですが、
レスポンシブ対応というのは一般的にどういったやり方が正しいのか質問です。

今までの以下のような例がありました。
たとえばPCでwidth: 1000px、 SPでは340pxの見出しがあるとします。

コードを書く際、

// パターン1
// デザイン通りに固定値
// ブレイクポイントで幅をデザイン通り切り替える
.hoge {
  width: 330px;
}

@media screen and (min-width:1024px) {
  width: 1000px; 
}

// パターン2
// デザインは参考程度で画面幅に応じて小さくなる
bootstrapなどの.containerみたいなのを使う

パターン1の場合、
デザインに忠実だと思いますが画面幅を変えた際見応えが悪くなる。
また、今回の例だと横場はiphoneの古いサイズからはみでてる、、、

パターン2の場合、
デザインの値に忠実とは言えないが見応えがいい。
ただ、アスペクト比とか考えることが多い？

皆様のご意見をお聞きしたいです。

Comments

[miyabi_pudding]

一般的に、という答えは存在しません。
全て要件によって、最適である、ないが存在するだけです。
また、teratailでは、抽象的に意見を募るような質問は推奨されておりません。

[m.ts10806]

要件次第でも違いますし同じデザイン同じフレームワークを使っていたとしても全く同じ作りにはなりません。

Answer 1

「要件次第」に「対象とする端末、ブラウザ（バージョン）や世代、ユーザー」も含むので一律に同じやり方にはなりません。
なので、私が対応する際も「基盤はCSSフレームワークを使う」としつつも、要件によって作りは全く違ってきます。

Comments

[退会済みユーザー]

回答ありがとうございます！

Answer 2

少なくともわたしはこうするということでお答えします。

前提として

• デザインの変更はSP・TAB&PC（SP・TAB・PC）で
• 基本pxはmax-width以外使わない

です。
フォント周り以外はだいたいvwで指定をします。

Comments

[退会済みユーザー]

回答ありがとうございます！