web-dev-qa-db-ja.com

レスポンシブデザインブレークポイントにアスペクト比を使用する

私は私のサイトをレスポンシブにするための最良の方法が何であるかを理解しようとしています。多くの人がレスポンシブデザインを画面のピクセルサイズに基づかせていませんが、アスペクト比のブレークポイントが私のウェブサイトに最適なデザインにつながると思います。

これが、何らかの方法で潜在的な欠点を伴う異常なアプローチであるかどうかを知りたいだけです。もちろん、フォントサイズなどを調整するために画面の寸法を引き続き使用しますが、CSSの大部分はアスペクト比に基づいて再調整されます。

このアプローチがどこでも話題になっているとは思えないので、少し心配です。

10
seyelent

それは素晴らしいアイデアだと思います。実装できない理由はありません。レスポンシブデザインは(まだ)新たな分野であり、アスペクト比が今日のビューポート幅アプローチよりも優れたユーザーエクスペリエンスを提供することをどうにかして示すと、クロスデバイスおよびレスポンシブデザインの将来のパスに影響を与える可能性さえあります。

探索、調査、実装、テスト。

5
Benny Skogberg

非常に問題があると思います。デバイスの幅に合わせる方が、アスペクト比に合わせるよりもはるかに便利です。ほとんどの場合、たとえ縦横比が同じであっても、4インチ(対角)デバイスのレイアウトを10インチデバイスと同じにすることは望ましくありません。

ここでのもう1つの問題は、Web上のテキストを処理する場合、垂直方向のサイズ変更を制御するのが難しいことです。 40emのような幅メトリックを指定するのは簡単ですが、テキストのブロックの高さを制御することはほとんどできません。特定のフォントサイズを強制しない限り、フォントの高さはどれほどかわからないためです。私のように、目の不自由な人がブラウザの設定で設定したフォントサイズを使用できるようにする必要があります)。これは単に水平方向に流れるテキストの性質です。幅は指定できますが高さは指定できません。

しかし、実験をやめさせてはいけません。ベニーが言ったように、「探索、実験、実装、テスト」!

10
obelia

潜在的な欠点

主な潜在的な欠点は、アスペクト比が、使用しているデバイスのサイズを示さないことです...これは、応答性の高いソリューションの目的の1つです。

スマートフォンと同じアスペクト比の30インチモニターを使用している場合がありますが、両方に同じUIを表示したくない場合があります。

1
DA01

アスペクト比を使用してブレークポイントの数を増減することはできないと思います。したがって、デメリットやメリットは、開発中にそれがより理にかなっている場合に限られます。あまり使われていませんが、先ほど触れたように、画面のピクセルサイズで組み合わせれば、悪くはありません。ピクセルサイズは、大きなデバイスの特定のアスペクト比と一致する可能性があるものとは異なる可能性がある小さなデバイス(時計など)の異なるレイアウトをレンダリングするために使用されます。したがって、幅+アスペクト比のパターンは、最も一般的に使用されるブレークポイントの幅+高さのパターンに似ています。

デバイスの画面の視覚的な角度を使用する標準があればいいでしょう。時計は、ある日、スマートフォンと同じ数のピクセルと同じアスペクト比を持つことができますが、*一般的に使用する視覚的な角度(ユーザーの視野の大きさ)は、正しいレイアウトを決定するのに非常に役立ちます。したがって、時計の視角の値ははるかに低くなります...

0
David Leonard