1

Twitter Bootstrap を使用してレスポンシブ レイアウトを構築していますが、すべてのサイズ/デバイスでレイアウトの見栄えを維持するのが難しいと感じています。

初期の試みでは、単純にグリッドを使用して配置しようとしましたが、ページ要素がさまざまなサイズで目的の場所に配置されることはありませんでした。現在、メディア クエリを使用して、Bootstrap のスタイルと独自のスタイルの一部をオーバーライドしています。これは、今後のメンテナンスの頭痛の種になる可能性があるようです。

スタイルをオーバーライドするのではなく、メディア クエリ イベントに登録して、画面のサイズに基づいてスタイルを追加/削除する必要があると考えています。

Bootstrap を使用して、さまざまな画面サイズでページのレイアウトを調整するための優れた方法について、アドバイスをいただけますか?

私は一般的なアドバイスを探していますが、コードとスクリーンショットが役立つ場合は投稿できます。

更新: メディア クエリ イベントは十分にサポートされていないようです。

4

1 に答える 1

1

あなたは正しい軌道に乗っています。CSS メディア クエリを使用します。Firefox には、ページを特定のビューポートに合わせて調整できる優れたアドオンがあり、ピクセル単位で変更を確認できますが、Chrome にも同様の機能があると確信しています。

レスポンシブ スタイルシートを有効にしている限り、ブートストラップという理由だけで特別なトリックはありません。

これは、メディアクエリを開始するのに適した場所です

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
于 2012-12-19T16:36:48.963 に答える