レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法

Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。 スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れたりしないようにするための実装方法を紹介します。横一行配置のアイコンが改行してしまう、画像が横長になってしまう、フォームの入力欄がやたら広くなる、など一般的なデザインで見かけると思います。 Thinking About The In-between Design Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブにおける中間のデザイン 中間のデザインとは 中間のデザインに備えて

[coliss]

スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法。

[a44k]

崩れないように注意

[sisya]

windowsで頻出する画面サイズなのにレスポンシブがやたら崩れるサイズに960x1080がある。スマホと区別を付けたいなら1100pxを割った時に切り替えるべきなのに、なぜか1000pxにラインを持って生きている人が多い。

[yoshi-na]

あるある