web-dev-qa-db-ja.com

レスポンシブなウェブサイトの最小幅？

私の経験では、ほとんどのレスポンシブWebサイトには最小幅がないため、小さなサイズ（たとえば、100pxウィンドウ）にサイズ変更すると、コンテンツがねじ込まれて判読できなくなります。

例： http://alistapart.com/article/responsive-web-design

私はRWDの柔軟性を気に入っていますが、サイトのプレゼンテーションが小さすぎるとサイトの表示が気に入らないため、通常はサイトに最小幅を実装します。レスポンシブでない多くのサイトではスクロールできますが、min-widthを使用することは良い妥協案であり、それがユーザビリティにまったく影響するかどうか疑問に思っていました。例 https://theartofdining.co.uk/

website-designmobile-webresponsive-design
30
benbyford

Webデザインは常に、関心のあるオーディエンスを選択することを目的としています。 care使用中のすべてのブラウザについて、最小限の共通機能セットに依存するか、プログレッシブエンハンスメント/グレースフルデグラデーション手法を使用して、利用可能な最新の機能を利用できます。後者のアプローチは多くのリソースを必要とします。

個人的には、幅320px以上のデバイスについてのみ心配しています。ある意味、私は小型のデバイスについてはあまり気にしませんが、私が作成したサイトには、すべてのブラウザーでいくつかの（おそらく削減された）機能があることを期待しています。

30
obelia

First： min-widthsまたはmax-widthsをロードした優れたレスポンシブサイトを使用したり、同じメディアルールでそれらを混在させることもできます。レスポンシブスタイルシートを作成するときは、人によってアプローチが異なります。

メディアクエリをすべて次のように記述します：

@media screen and (min-width : 320px) {
}
@media screen and (min-width: 680px) {
}
@media creen and (min-width : 1024px) {
}

このCSSは、表示領域がそれぞれ320、680、1024より大きい場合に適用されることを意味します。

もしあなたが持っているなら：

@media screen and (max-width: 320px) {
}
@media screen and (max-width: 680px) {
}
@media screen and (max-width: 1024px) {
}

このCSSは、表示領域が320、680、1024より小さい場合に適用されることを意味します。

2番目：より具体的なメディアクエリで次のように言うこともできます。

@media screen and (min-width: 680px) and (max-width: 1024px) {
}

状態：表示領域が680pxから1024pxの場合、これらのスタイルが適用されます。

まとめると、min-width media-queriesのWebサイトが多くない場合でも、max-widthのサイトほどうまく機能しないわけではありません。おそらく、レスポンシブビットを作成した人は、max-widthを使用する方が快適でした。

10
António Regadas

使いやすさに影響するかどうかは、ユーザー、ユーザーが使用しているデバイス、最小幅について何を決定したかによって異なります。

ほとんどのスマートフォンではスクロールとズームが可能であるため、最小幅を、コンテンツを妨げない最小幅に設定することができます。ただし、レスポンシブデザインの主な目的は、さまざまな幅でレイアウトを変更できるようにすることです。これにより、コンテンツを収めることができます。大きな画像やグラフが、コンテンツ。

いずれにせよ、私は一般的に320px未満の幅についてあまり心配していませんし、ほとんどのWebデザイナーもそうではないようです。

2
Eric