使用小型浏览器时，响应性设计CSS填充整个屏幕

我正在尝试使用响应式css媒体查询来隐藏侧边栏，除非屏幕很大，或者平板电脑足够大并且处于横向模式。它似乎是基于调整我的浏览器的大小来工作的，直到我达到一定的大小，它就会填满整个屏幕。我也使用推特引导风格，但不是响应风格，所以我不认为这会是一个问题

我是否应该使用其他媒体查询？我还尝试了

minwidth

的0和

maxwidth

的320，但都不起作用

例如：

HTML:

引导必须帮助您轻松地完成这项工作。隐藏电话，可视桌面

不要让您的生活变得复杂，也不要创建自定义css类，请尝试以下简单的方法：

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

祝你好运

简单地使用

//横向手机到纵向平板电脑
@介质（最大宽度：767px）{
.侧边栏{
显示：无；
}
}

为什么在使用twitter引导时没有使用响应css？有一个叫做

.hidden phone

的类，非常有用

最常用的媒体查询是

//大型桌面
@介质（最小宽度：1200px）{
}
//从纵向平板电脑到横向和桌面
@介质（最小宽度：768px）和（最大宽度：979px）{
}
//低于1024px的一切
@介质（最大宽度：979px）{
}
//横向手机到纵向平板电脑
@介质（最大宽度：767px）{
}
//景观电话和向下
@介质（最大宽度：480px）{
}

为什么我没有使用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;
    }
}

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