ブレイクポイントは指定しませんが、横幅の最低サイズは320PX以下を想定しないといけなくなったと聞きました。

Question

ブレイクポイントは指定しませんが、横幅の最低サイズは320PX以下を想定しないといけなくなったと聞きました。
日立のスマホが280PX位という話ですが、一体min-widthはいくつにしないといけなくなったのでしょうか？

また、そのサイズまでカラム落ちしないように作り、それ以下はサイズが小さくならないように、wrapperのdivにmin-widthで小さくならないように固定しておけばよいでしょうか？
最大は今でも1920pxまでの固定ですね。

またgnaviは280くらいになると4列が3列と1列などにどうしてもなってしまいますが、
どのように対処しますか？
非表示メニューでドロワーメニューの一列にするしかないでしょうか？

Answer 1

日立のスマホが280PX位という話ですが、一体min-widthはいくつにしないといけなくなったのでしょうか？

スマホ向けレイアウトは原則シングルカラム＋横サイズ可変で作るのが定石ですから、
仮に320px以下の端末が出てきたとしてもそのまま可変で縮小＋文字列折り返しされても
問題ないようにしておけば良いだけではないでしょうか。
（とはいえ320px以下ですと相当1行に入る文字数も少なくなってくると思いますので、
全体のフォントサイズは一回り小さくなるように分岐した方がレイアウトは維持しやすいかもしれませんね。）

またgnaviは280くらいになると4列が3列と1列などにどうしてもなってしまいますが、

どのように対処しますか？

gnaviとおっしゃっているのはPCレイアウトでよく使う横並びのグローバルメニューのことを指しているのだと思いますが、
横並び型メニューは項目数や文字数にもよりますが280どころか800px前後あたりからそろそろ苦しくなってきます。
ですので、768なり640なり、スマホレイアウトに切り替わる段階でさくっと縦並び型メニューに変更した方が無難です。
4〜5項目以下のアイコン的なメニューであればそのまま横並びでも行けるかと思いますが、
そうでないならレイアウト的には使い勝手的にも早めにUIを変えたほうがよいと考えています。

Comments

[退会済みユーザー]

ありがとうございます。
また中途半端に4列のメニューが3列、1列になるとさすがにまずいので中途半端に2列2列にしないで、
カラム落ちするところに一つブレークポイントを作って完全に一列にしてしまうのですね。
ただ、メニューがやたらと長くなってしまうので、クリックファンクショで出るようにしますか？
それとだらっと出しておきますか？

[aKusano]

4列程度であればカラム落ちしない方法でコーディングするという選択肢もありますね。
display:table-cellやdisplay:flexを使えば幅が狭くなってもカラム落ちはしませんので。
メニュー文言の調整は必要かもしれませんが。

[退会済みユーザー]

下記のサイトの、フッターにあるナビのようにタブレット以上は横に並べて、
タブレット以下は、かなり横長になってしまうものの、縦一列にするのが良いということですね。
かなり長めになりますが、そこまで気にする必要はないのですね。

https://ssl.nihon-data.jp/

[aKusano]

細かくブレイクポイントを設定して縦一列にする前に二列の状態を挟むとかした方が確かに丁寧かもしれませんが、その画面サイズで閲覧しているユーザー数の割合を考えたら、そこまでする必要あるか疑問に感じるかと思います。
気になるなら縦一列のスマホレイアウトになる前に中間サイズのレイアウトを挟めばよいですし、そこまで手間をかける余裕がなければ一律縦一列のスマホレイアウトでも良いんじゃないでしょうか。

[退会済みユーザー]

仕事でも768px以下は長いボタンになってしまっても、一列、
それ以上は横並び一行で十分なのですね。

相当うるさいクライアントでない限り途中で二列にするまでしなくていいのですね。

[aKusano]

担当次第じゃないですかね。
あとは、自分がそれで納得できるかどうか。
納得出来ないなら提案して対応すればいいと思います。その分お金増やしてもらったりは多分できないでしょうがｗｗｗ