0

シンプルな Web ページにカスタム CSS と一緒にブートストラップを使用しています。#contentユーザーがdivをスクロールしてもその位置を維持する固定サイドバーがあります。ただし、Web ページをスマートフォンで表示すると (またはブラウザーの幅が狭くなる)、サイドバーは Web サイトの上部を適切に占有するのではなく、不安定な動作をします。

私が探している動作は、Twitter のブートストラップ サイトと同じです。ブラウザの幅を狭めて、私の言いたいことを確認してください。

私の現在の構造は次のようなものです：

<div class="span3" style="position:fixed">
    // sidebar stuff
</div>

<div class="span8 offset3">
    // content
</div>
4

1 に答える 1

1

そのためにメディアクエリを使用できます。

メディア クエリは、メディア タイプと、特定のメディア機能の条件をチェックする 0 個以上の式で構成されます。

このメディア クエリは、ビューポート (ドキュメントがレンダリングされる画面/用紙の一部) の幅が 400 ～ 700 ピクセルのデバイスでスタイル シートを使用できることを表しています。

@media screen and (min-width: 400px) and (max-width: 700px) { … }

ソース: http://www.w3.org/TR/css3-mediaqueries/

于 2013-03-07T19:02:08.757 に答える