4

画面が大きい場合、または十分な大きさのタブレットで横向きモードでない限り、レスポンシブ CSS メディア クエリを使用してサイドバーを非表示にしようとしています。画面全体を占める特定のサイズになるまで、ブラウザのサイズ変更に基づいて機能しているようです。Twitter Bootstrap スタイルも使用していますが、レスポンシブ スタイルは使用していないため、それがどのように問題になるかわかりません。

使用すべき別のメディアクエリはありますか? min-width0 と320も試しましたがmax-width、うまくいきませんでした。

例： 作業用サイドバー、サイドを埋めて表示 機能していません。特定のサイズに達すると、ブラウザ ウィンドウ全体がいっぱいになります

HTML:

<div class="row">
    <div class="span2 sidebar">
        <a href="@Url.Action("Index", "Home")">
            <h3>Link Home</h3>
        </a>
    </div>
    <div class="span10">
        @RenderBody()
    </div>
</div>

CSS

html {
    height: 100%;
}

.sidebar {
    background: #333;
    margin: 0;
    padding-left: 1.5em;
    height: 100%;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    min-height: 100%;
    position: absolute;
    display: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fenix', serif;
    font-weight: 400;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    .sidebar {
        display: none;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
    .sidebar {
        display: none;
    }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
    .sidebar {
        display: none;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
    .sidebar {
        display: none;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
    .sidebar {
        display: block;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
    .sidebar {
        display: none;
    }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    /* Styles */
    .sidebar {
        display: block;
    }
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
    .sidebar {
        display: block;
    }
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    .sidebar {
        display: none;
    }
}
4

2 に答える 2

4

単に使用する

// Landscape phone to portrait tablet
@media (max-width: 767px) {
    .sidebar {
            display: none;
    }
}

また、Twitter のブートストラップを使用するときにレスポンシブ CSS を使用しなかったのはなぜですか? というクラスがあり.hidden-phone、とても便利です。

最もよく使用されるメディア クエリは次のとおりです。

// Large desktop
@media (min-width: 1200px) {
}

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) {
}

// Everything below 1024px
@media (max-width: 979px) {
}

// Landscape phone to portrait tablet
@media (max-width: 767px) {
}

// Landscape phones and down
@media (max-width: 480px) {
}
于 2013-03-10T00:04:21.370 に答える
3

Bootstrap には、これを簡単に行うのに役立つレスポンシブ ユーティリティ クラスがあります。例: .hidden-phone、.visible-desktop

生活を複雑にしてカスタム css クラスを作成する代わりに、次のような単純なことを試してください。 

<div class="row">
<div class="span2 sidebar hidden-phone">
    <!-- sidebar details -->
    </a>
</div>
<div class="span10">
    <!-- main body -->
</div>
</div>

幸運を！

于 2013-03-10T00:04:07.163 に答える