Почему мои медиа-запросы не применяются?

Question

Отредактировано для добавления, так что никто больше не отвечает за это как ответ: у меня уже есть тег viewport в моем коде.

---

Я прочитал много ответов здесь на подобные вопросы, и я уверен, что моя проблема, вероятно, лежит где-то в порядке, что мои запросы были объявлены, но я не могу за жизнь мне фигурную где.

Bootply example here.

У меня есть две дивы, тот, который должен отображаться в широких раскладок, и тот, который должен отображаться в узких раскладок.

<!-- for small layouts --> 
<div class="container-fluid slogan text-center" id="home-slogan-container-small"> 
    small 
</div> 

<!-- for 800 px and wider --> 
<div class="container-fluid slogan text-center" id="home-slogan-container-large"> 
    large 
</div> 

(Это очень урезанные,. Фактическое содержание имеет различные схемы внутри дивы)

Проблемы у меня в том, что, независимо от того, какого размера я масштабировать браузер (протестировано в FF с помощью ctrl-shift-m, чтобы получить мобильный вид, а в Chrome с помощью кнопки мобильного просмотра в инструментах dev) отображается малый макет.

Вот мой CSS:

#home-slogan-container-small { 
    padding-top: 15px; 
    text-align: center !important; 
    display: none; 
} 

#home-slogan-container-large { 
    padding-top: 15px; 
    text-align: center !important; 
    display: none; 
} 


@media only screen and (max-width: 1500px) { 
     #home-slogan-container-small { display: none !important;} 
     #home-slogan-container-large { display: block !important;} 
} 

@media only screen and (max-width: 1200px) { 
    #home-slogan-container-small { display: none !important;} 
    #home-slogan-container-large { display: block !important;} 
} 


@media only screen and (max-width: 960px) { 
    #home-slogan-container-small { display: none !important;} 
    #home-slogan-container-large { display: block !important;} 
} 

@media only screen and (max-width: 800px) { 
    #home-slogan-container-small { display: block !important;} 
    #home-slogan-container-large { display: none !important;} 
} 


@media only screen and (max-width: 799px) { 
    #home-slogan-container-small { display: block !important;} 
    #home-slogan-container-large { display: none !important;} 
} 

@media only screen and (max-width: 420px) { 
    #home-slogan-container-small { display: block !important;} 
    #home-slogan-container-large { display: none !important;} 
} 

@media only screen and (min-width: 300px) { 
    #home-slogan-container-small { display: block !important;} 
    #home-slogan-container-large { display: none !important;} 
} 

Я PHP/MySQL разработчик, который имел самозагрузки сайт упал на меня; CSS не мой сильный костюм. Любое объяснение будет оценено.

Answer 1

вы должны удалить последний вопрос СМИ

@media only screen and (min-width: 300px) { 
    #home-slogan-container-small { display: block !important;} 
    #home-slogan-container-large { display: none !important;} 
} 

причина в том, что эта последняя является только мин-ширина правила и отменяют, что все ранее (за исключением случая wieport < 300px)

Answer 2

Вот проблема

@media only screen and (min-width: 300px) { 
    #home-slogan-container-small { display: block !important;} 
    #home-slogan-container-large { display: none !important;} 
} 

это мин-ширина ... это означает, что-нибудь с шириной больше, чем (например, все браузера), будут иметь эти свойства быть правдой. Измените его на максимальную ширину, и все будет хорошо.

---

Редактировать: все нижеследующее верно, но не причина проблемы @EmmyS. Решение выше.

У меня недавно была эта проблема с Фондом, и я подозреваю, что у бутстрапа тоже проблема. ваш HTML является вероятно отсутствует мета заявление:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

добавить, что в голову вашего HTML, и это вероятно, будет работать нормально. Причина, по которой у вас возникает эта проблема, заключается в том, что мобильный браузер решает «хорошо, я не знаю, как отображать этот сайт, поэтому я собираюсь масштабировать его, как если бы я был большим браузером, хотя я не."

Answer 3

Перепишите все стили, как это:

/* Styles for size 0px - 799px */ 
.small { 
    display: block; 
} 

.middle { 
    display: none; 
} 

.large { 
    display: none; 
} 

/* Styles for size 800px - 1200px */ 
@media (min-width: 800px) { 
    .small { 
    display: none; 
    } 

    .middle { 
    display: block; 
    } 

    .large { 
    display: none; 
    } 
} 


/* Styles for size 1200px and more */ 
@media (min-width: 1200px) { 
    .small { 
    display: none; 
    } 

    .middle { 
    display: none; 
    } 

    .large { 
    display: block; 
    } 
} 

я выбрал 800px и 1200px в качестве точки останова. Вы можете изменить их или добавить новые.