0

私は新しい「レスポンシブ デザイン」を学んでいます。最初に理解したのは、定義できるものを定義する際にパーセンテージを使用する必要があるということです。最も重要なのは、width.

2つのdivがあるとしましょうinline-block。

<div>
   //Left div
</div>
<div>
   //Right div
</div>

最初の div には がありwidth:50%、2 番目の div には がありwidth:40%ます。ここではすべてがうまくいっているように見えます。それらは隣同士にあり、ブラウザのサイズを変更すると小さくなります。

サイズが大きくなりすぎないようにするため (読み取り不能になる場合)、min-widthピクセル単位で使用する必要があります。

min-width:200px;最初の div と2 番目の divを設定しmin-width:100px;、2 番目の div が最初の div の下になるまでウィンドウのサイズを変更すると、すべてがうまくいくように見えます。

しかし、MORE と MORE のサイズを変更するwidthと、ブラウザのサイズがmin-widthこれらの div より小さいため、スクロールバーが作成されるため、固定されたままになります。

小さい解像度 (携帯電話、タブレット) でどのように表示されるかをテストできるように、サイズを変更しています。ここですべてが停止し、メディア クエリの役割が始まりますか? または、これを修正するためにできることは他にありますか?

JSFIDDLE

4

2 に答える 2

1

ここですべてが停止し、メディア クエリの役割が始まりますか?

基本的に、はい。メディア クエリは、提供するスペースにデザインが収まらないと感じたときに使用する必要があるものです。あなたが話している時点で、およそ 300 ピクセルのウィンドウ サイズ (プラス マージン?) では、メディア クエリを使用して、これらの div の表示方法を変更し、おそらくビューポートの幅の 100% になるようにする必要があります。したがって、横に並べるのではなく、積み重ねます。これは、実際の例では最小幅を効果的に上書きします。

実現したいのは、ビューポートのサイズに関係なく機能するデザインであり、ビューポートが小さすぎたり大きすぎたりすると、ユーザーがレイアウトを使用したり読んだりするのが難しくなり、メディアクエリが最適です今すぐレイアウトを「リセット」して、その新しい寸法セットの使いやすさを再注入してください。

最小幅の設定について必ずしも心配する必要はないと思います。ただし、古いバージョンではメディアクエリを処理できないため、Internet Explorer を考慮するためにそれらを使用することには強い議論があります。

于 2013-03-02T15:12:53.563 に答える
0

あなたが探しているものは、レスポンシブ レイアウトとして知られています。

レスポンシブ レイアウトを実現するのに役立つ参考リンクをいくつか紹介します。

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices

于 2013-03-02T15:13:59.570 に答える