4

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

我应该使用其他媒体查询吗？我还尝试了min-width0 和max-width320 的一个，但没有用。

例子： 工作侧边栏，填充侧边并显示 不工作，一旦达到一定的大小，它会填满整个浏览器窗口

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 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) {
}
于 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 回答