Мой последний запрос СМИ не используется

Почему последний медиа-запрос не работает здесь? Я чем-то смотрю? Я попытался изменить порядок, но по какой-то причине он никогда не оставляет последнего. Кажется, это правильный каскадный порядок для меня.Мой последний запрос СМИ не используется

@media screen and (min-width: 768px) { 
 
    .mobileBrand { 
 
    display: none; 
 
    } 
 
} 
 
@media screen and (max-width: 767px) { 
 
    .desktopBrand { 
 
    display: none; 
 
    } 
 
} 
 
@media screen and (max-width: 1079px) { 
 
    .nav-right { 
 
    margin-left: 1em; 
 
    } 
 
} 
 
@media screen and (max-width: 1106px) { 
 
    .nav-right { 
 
    margin-left: 6em; 
 
    } 
 
}

источник

2016-09-13 AndrewTheGeek

У вас есть какие-то странные символы там, что я считаю, испортите разборе http://i.imgur.com/f01TOc0 .png (красные точки). Также можно увидеть с помощью http://csslint.net/ edit: просто для уточнения, они не существуют после первых двух запросов. –

, пожалуйста, напишите свой HTML-код, кажется, что вы говорите min-width 768px и max-width 767px. оба они не показаны во всех размерах. –

Если вы посмотрите на медиа-запроса:

@media screen and (max-width: 1079px) { 
    .nav-right { 
    margin-left: 1em; 
    } 
} 

@media screen and (max-width: 1106px) { 
    .nav-right { 
    margin-left: 6em; 
    } 
}

У вас есть два запроса, которые конфликтуют друг с другом.

Один от 0px до 1079px, а другой от 0px до 1106px.

Они полностью перекрываются для 1079px.

Я бы определил запросы немного более четко.

Заявляя что-то вдоль линий

@media screen and (min-width:1080px) and (max-width:1106px)

Таким образом, все, что выше ваш определенный 1079px покажет запас левом 6EM вместо.

источник

2016-09-13 16:29:55

В приведенном выше сценарии не ясно указывается браузеру, какой крайний левый размер применяется, если экран меньше 1079 пикселей - это может быть либо 6, либо 1em.

Вы должны определить мин и макс значения для запроса 1106px.

@media screen and (min-width: 1080px) and (max-width: 1106px) { 

    .nav-right { 
     margin-left: 6em; 
    } 
}

источник

2016-09-13 16:30:16

четвертый будет перезаписывать третий, так как и четвертый определяет все, что меньше 1106px. Так что третий никогда не будет применяться.

Используйте min-width И max-width на четвертом, чтобы этого избежать.

Сложение/EDIT: или просто изменить порядок третьей и четвертой ...

источник

2016-09-13 16:38:01 Johannes

Мой последний запрос СМИ не используется

ответ

Смежные вопросы