Вот пример кода
@media only screen (max-width: 750px)
.ic
display: inline-block
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВсему виной может быть вложенность... Эта проблема и в less
Смысл такой, если в примере такая конструкция
html, body
width: 100%;
height: 100%;
#wrapper
width: 100px;
height: 100px;
То в css при компиляции записывается так
html, body{
width: 100%;
height: 100%;
}
html, body #wrapper{
width: 100px;
height: 100px;
}
а когда ты задаешь @media
@media only screen (max-width: 750px)
#wrapper
width: 100px;
height: 100px;
что бы изменить только wrapper не слушает медиа
надо дописать в медиа и вложенность
@media only screen (max-width: 750px)
html, body
#wrapper
width: 100px;
height: 100px;
Быть может, проблема есть и со вложенностью, как пишет Air, но очевидный косяк - отсутствие and
в медиа-запросе. Код должен быть таким:
@media only screen and (max-width: 750px) {
.ic {
display: inline-block
}
}
@media only screen and (max-width : 750px), only screen and (max-device-width : 750px)
10 ноя 2017 в 11:32
max-device-width
и max-width
- разные вещи, и должны работать вне зависимости друг от друга во всех браузерах) Почитайте, чем они отличаются.
Поправьте синтаксис:
@media only screen (max-width: 750px)
{
.ic{
display: inline-block;
}
}
@media only screen and (max-width: 750px) .ic{ display: inline-block
так тоже не работает
10 ноя 2017 в 9:06