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

时间:2013-03-09 23:42:36

标签: css responsive-design

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

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

实施例: Working sidebar, fills side and is displayed Not working, once reached a certain size it fills entire browser window

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

2 个答案:

答案 0 :(得分:4)

只需使用

// 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) {
}

答案 1 :(得分:3)

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>  
祝你好运!