Как правильно использовать медиа-запрос для изменения стиля в зависимости от ширины экрана? - PullRequest
Новая
       28

Как правильно использовать медиа-запрос для изменения стиля в зависимости от ширины экрана?

3 голосов
/ 15 августа 2011

У меня есть стиль, который я хочу отличать в мобильных устройствах.Стиль находится в таблице стилей, содержащей много стилей.

Стиль такой: 

.header_wrapper{
     background-image:bla bla bla;
}

Я хочу, чтобы в вышеуказанном стиле не было фонового изображения при отображении на мобильных устройствах сширина меньше, чем, скажем, 480px?(только предположение о ширине, но не стесняйтесь предлагать хорошую ширину): 

.header_wrapper{
     background-image:none;
}

Возможно ли сделать все это из одной таблицы стилей?Или мне нужно скопировать всю таблицу стилей (существует множество стилей), чтобы просто изменить один стиль, а затем добавить таблицу стилей на веб-сайт?

Как насчет порядка приоритета?

1 Ответ

2 голосов
/ 15 августа 2011

Можно сделать все это из одной таблицы стилей, используя медиа-запросы.

Css будет выглядеть примерно так: 

@media screen and (max-device-width: 480px) {
    .header_wrapper{
         background-image:none;
    }
}

Это должно быть помещено в конец таблицы стилей дляубедитесь, что он переопределяет предыдущий стиль.

Вы также можете использовать медиазапросы для ссылки на отдельную таблицу стилей, если есть много стилей для переопределения. 

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css" />
...