CSS - игнорировать оригинальные CSS-дивы при создании мобильного CSS

Question

Надеюсь, мой заголовок не слишком запутанный. В любом случае, я все еще изучаю CSS и сейчас занимаюсь созданием мобильной версии сайта моей компании. В настоящее время я хочу изменить нашу панель навигации, и CSS для навигации немного длинен. Так что сейчас в файле CSS есть

.nav { /*styles*/ }
.nav ul { /*more styles*/ }
.nav li { /*more <s>beer</s> styles*/}
/*and so on*/

Есть ли так или иначе, чтобы мобильная версия сайта игнорировала все селекторы #nav из исходного файла независимо от того, сделал ли я новый селектор в мобильном CSS? Или мне нужно переопределить каждый селектор в оригинальном CSS новыми в мобильном CSS?

Answer 1

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

<link rel="stylesheet" media="screen" ... etc./>

Фрагмент выше ссылается на обычное окно браузера.

Вот где вы можете узнать о них: http://www.w3.org/TR/CSS21/media.html

Answer 2

Я бы предложил разделить содержимое ваших обычных и мобильных стилей на отдельные таблицы стилей, например:

1. База: стили, общие для обоих.
2. Обычный: стили только для основного сайта.
3. Mobile: стили только для мобильного сайта.

База всегда включена. Затем включается только обычный или мобильный, в зависимости от просмотра устройства. Таким образом, вам не нужно беспокоиться о переопределении стилей в одном, чтобы просто «сбросить» стили из другого.

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

Answer 3

Вы должны предоставить два разных файла таблицы стилей и импортировать их, указав тип media

<link rel="stylesheet" href="/all.css"> 
<link rel="stylesheet" media="screen" href="/computers.css"> 
<link rel="stylesheet" media="handheld" href="/mobile.css"> 

В качестве альтернативы вы можете использовать только один файл CSS, таким образом

@media print {
    body { font-size: 10pt }
}
@media screen {
    body { font-size: 13px }
}
@media screen, print {
    body { line-height: 1.2 }
}

В вашей конкретной проблеме вы можете просто добавить @media screen в начале определения .nav.

@media screen {
    .nav { /*styles*/ }
    .nav ul { /*more styles*/ }}
    .nav li { /*more <s>beer</s> styles*/}
}