Адаптивный дизайн CSS заполняет весь экран при использовании небольшого браузера

Я пытаюсь использовать адаптивные медиа-запросы 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;
    }
}

css responsive-design
person Cody    schedule 09.03.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Просто используйте

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

И почему вы не использовали отзывчивый css при загрузке twitter? Есть класс .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) {
}
person Merec    schedule 10.03.2013
comment
Почему я не использовал CSS: я даже не догадывался, что существуют классы для скрытия вещей специально для телефона / планшета. Я думал, это просто изменить размер окна, когда оно стало меньше .... спасибо. Это было намного проще. - person Cody; 10.03.2013

arrow_upward
3
arrow_downward

В 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>

Удачи!

person David Taiaroa    schedule 10.03.2013