html - レスポンシブデザイン失敗

Question

レスポンシブ デザインを台無しにしました。ブラウザを最小化すると、すべてのグラフィックが台無しになります。css でブラウザーのサイズが小さい場合に、グラフィックスを本来あるべき場所に固定する方法はありますか? http://www.magnixsolutions.com/dev/test/test.html

Answer 1

レスポンシブ デザインのツールを備えた Bootstrap を使用しているようです。主なことは、 .rowクラスとspanx列クラスを確実に使用することです。詳細については、Twitter Bootstrap を使用してレスポンシブ Web サイト デザインを作成する方法を参照してください。

デフォルトのグリッドは 12 列です。したがって、連続したスパンは 12 に等しくなるはずです。HTML は次のようになります。

<div class="container">
     <div class="row">
          <div class="span8 image">
          </div>
          <div class="span4 containerForm">
          ...insert form here...
          </div>
     </div>
</div>

マークアップを適切に設定したら、CSS に移動し、@watson が回答で言及しているように、@media クエリの追加を開始します。ただし、気をつけてください。Bootsrap にはデフォルトの CSS セットがたくさんあります。必要な結果を得るには、オーバーライドする必要がある場合があります。

Answer 2

メディアクエリを使用する必要があります。すばらしいです。