0

В точках 599рх, 899рх, 1199рх и 1799рх медиа-запросы отпадают. Эти точки при условиях max-width не включительны получаются, но как с этим бороться? Был вариант без доп. условия с max-width( только min-width-ы), но начинал работать на всех ширинах только запрос @media only screen and (min-width: 600px). Где ошибка? Подскажите, пожалуйста, а то я уже в полной растерянности.

.menu  {   
    width: 100%;
    line-height: 2.7;
    box-sizing: border-box;
}

.menu__item  {
    display: inline-block;
    list-style: none; 
    padding: 0 3%;
}

.menu__item a {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-decoration: none;
    color: #f84545;
}

@media only screen and (min-width: 1800px) {
    .menu__item a {
    font-size: 24px;
    letter-spacing: 13px;
    
    color: brown;
    }
}
/*for-desktop-up*/
@media only screen and (min-width: 1200px)and (max-width: 1799px) {
    .menu__item a {
    font-size: 18px;
    letter-spacing: 10px;
    
    color: pink;
    }
}
/*for-tablet-up*/
@media only screen and (min-width: 900px)and (max-width: 1199px) {
    .menu__item a {
    font-size: 16px;
    letter-spacing: 8px;
    
    color: blue;
    }
}
/*for-tablet-portrait-up*/
@media only screen and (min-width: 600px)and (max-width: 899px) {
    .menu__item a {
    font-size: 12px;
    letter-spacing: 5px;
    
    color: orange;
    }
}
/*for-phone-only*/
@media only screen and (max-width: 599px) {
    ul .menu__item a {
    font-size: 5px;
    letter-spacing: 3px;
    
    color: green;
    }
}
<nav class="menu">
                <ul>
                    <li class="menu__item"><a href="#" class="menu__link">Mens</a></li>
                    <li class="menu__item"><a href="#" class="menu__link">Womens</a></li>
                    <li class="menu__item"><a href="#" class="menu__link">Brands</a></li>
                    <li class="menu__item"><a href="#" class="menu__link">Sale</a></li>
                    <li class="menu__item"><a href="#" class="menu__link">News</a></li>
                </ul>
            </nav>

2 ответа 2

0

max-width прописывай равным следующему min-width.

Например:

@media only screen and (min-width: 900px)and (max-width: 1199px) {

меняй на:

@media only screen and (min-width: 900px)and (max-width: 1200px) {

1
  • Протестила в инспекторе. Занятно получается: для размера 1200рх будет срабатывать запрос media only screen and (min-width: 900px) and (max-width: 1200px), а не media only screen and (min-width: 1200px) and (max-width: 1800px) ( как было до этого).
    – Halyna
    30 июл 2017 в 17:27
0

@dean-grey конфликт будет тогда )) там min-width и max-width одинаковые получться и будет то так то сяк. Но вы правильно говорите. @halyna попробуйте как говорит Dean Grey лишь с тем что max-width округляйте, а min-width +1

пример: @media only screen and (min-width: 901px)and (max-width: 1200px) {

1
  • похоже css не конфликтные люди писали :) Сработал вариант @Dean/ Grey.
    – Halyna
    30 июл 2017 в 17:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.