スマホデザインとPCデザインのコーディングの仕方について。

シンプルな質問

デザイナーさんから上がってきたPCデザインとスマホデザインに関して、

PCデザインとスマホデザインがあまり変わらない時は良いのですが、
PCデザインとスマホデザインのコンテンツ配置などが大きく変わる場合は、

・position:absolute,relativeなどを駆使して配置を変える。

もしくは

・PC・スマホデザインの2つのコーディングを行い、PCデザインの際はスマホデザインのコーディングをdisplay:none;で消す、スマホデザインの時はPCデザインのコーディングを消す。

みたいな感じでやるのがどちらが良いかとかはあるのでしょうか？
そもそも、上記のようなやり方は正しいのでしょうか？(もちろんcase by caseではあるかとは思いますが。。。)

PCデザインとスマホデザインのコンテンツ配置が大きく変わる場合は、コーダーのみなさんがどのようにコーディングをしているのかが気になります。

お答えいただけると嬉しいです。。。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

有名なライブラリを参考にすれば良いと思います。

https://getbootstrap.jp/docs/4.5/layout/grid/#grid-options
bootstrap4の場合、
グリッドのサイズ変更（幅が狭い場合は右側のブロックを下に移動させる等）
ブロックの表示・非表示（幅が狭い場合はdisplay:noneで消す）
があるようです

これは主観ですが、position:absolute,relativeが必要になるようなデザインなら、
デザイナーに別の配置を提案した方が良いかもしれません…
実装難易度が高く保守性が低下するようなデザインを無理に実装する必要は無いと思います

投稿2020/06/13 15:14