响应式设计CSS在使用小型浏览器时会填满整个屏幕

Question

我正在尝试使用响应式css媒体查询来隐藏我的侧边栏，除非屏幕很大，或者平板电脑足够大且处于横向模式。它似乎是基于调整我的浏览器大小调整，直到我达到一定的大小它填充整个屏幕。我也使用Twitter Bootstrap样式，但不是响应样式，所以我不知道这可能是一个问题。

我应该使用其他媒体查询吗？我还尝试了min-width 0和max-width 320，但没有用。

实施例：

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;
    }
}

Answer 1

只需使用

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

为什么在使用twitter bootstrap时你没有使用响应式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) {
}

Answer 2

Bootstrap有responsive utility classes可帮助您轻松完成此操作。例如.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>  

祝你好运！