2

ux.stackexchangeからのクロスポスト（提案どおり）

私はUXとIA、そしてインターフェースとソリューションの設計に関するすべてに不慣れです。グリッドに基づいた単純な画像ギャラリーを作成する必要があります。レスポンシブデザインとメディアクエリについて読みました。

わかりました。ワイドスクリーンでは、7列のグリッド、ラップトップ5列、タブレット3、smarthpone1があります。これはかなりクールです。widthプロパティにパーセンテージを使用して、流動的なレイアウトでこれを行いました。そして、すべてのビューポートサイズに柔軟に対応できるため、このソリューションが気に入っています。

しかし、ユーザーが「コマンド+」または「コマンド-」キーを使用してフォントサイズを変更した場合はどうでしょうか。画像の幅がパーセンテージの場合、コンテナサイズは変更されず、画像も変更されません。結果は少し奇妙です。すべてが小さくなりますが、画像は変化しません（まあ、マージンが変化します、それはさらに奇妙です）。

しかし、幅にemを使用すると、流動的なレイアウトが得られなくなります。

2つのレイアウトをどのように組み合わせるのですか？

4

1 に答える 1

1

私は個人的に2つの別々のcssスタイルシートを設定するのが好きです。1つはメインサイト（デスクトップバージョン）用で、もう1つはモバイルデバイス用です。

したがって、response.cssというスタイルシートでは、次のようなものを使用できます。

 @media only screen and (min-width: 768px) and (max-width: 1024px)
 {
   /*stuff in here*/
 }

また、必要に応じて幅を調整したり、必要に応じて幅を追加したりできます。

私は個人的にレスポンシブデザインが嫌いで、より流動的なデザインを楽しんでいます。非常に多くの異なるサイズのモバイルデバイスがあるため、流動的な設計を使用すると、達成しようとしていることに対して全体的にうまく機能する可能性があります。

フォントサイズについては、サイズ変更がより正確になるため、常にemを使用するようにしてください。

于 2012-12-27T17:44:19.913 に答える