Mobile.css переопределить default.css

У меня есть веб-сайт с одной таблицей стилей: default.cssMobile.css переопределить default.css

Я вручную обновляю его, чтобы реагировать.

Внутри default.css я импортировать файл другой CSS:

@import "mobile.css";

Ok,

Я использую "СМИ все", чтобы проверить изменения в браузере компьютера.

Мой вопрос о переопределении правил:

Например:

default.css:

.wrapper .header .logo { width:800px; background-color: black; font-size: 26px; }

mobile.css

@media all and (max-width:480px) { 
    .wrapper .header .logo { width:100%; background-color: blue; font-size: 14px; } 
}

Обычно в разрешении менее 480 пикселей правила, определенные на mobile.css, должны работать должным образом.

Но кажется default.css является переопределение мой mobile.css

Предполагая, что ".wrapper .header .logo" эквивалентно:

Не должен ли @media all и (max-width: 480px) основной и активный CSS?

источник

2014-02-06 Tiago

Вы уверены, что импортированные стили загружаются ПОСЛЕ стилей по умолчанию? –

Я импортировал ранее, потому что у меня также есть «reset.css». Когда я пытаюсь импортировать «mobile.css» после стилей по умолчанию, команда «@import» не работает:/ – Tiago

-1

Используйте «! Important» со свойствами, которые вы не хотите переопределять.

Ex.

.wrapper .header .logo { width:800px; background-color: black !important ; font-size: 26px; }

источник

2014-02-06 20:18:59

Медиа-запросы не добавляют к специфичности селектора в вашем CSS. Поэтому, если декларация @media предшествует другой декларации (по умолчанию), она будет переопределяться по умолчанию, поскольку последующие (в каскаде) декартации переопределяют предыдущие объявления с равной специфичностью.

Так как

1) Вместо того, чтобы использовать @import (который должен идти в верхней части таблицы стилей) ссылку на таблицу стилей медиа-запросов с помощью <link> тег непосредственно в <head>, после по умолчанию ссылку на стиль.(Также обратите внимание: @import является bad for performance)

2) каким-то образом увеличить specificity селектора в медиа-запросе

или

3) (последнее средство - use with caution) добавить !important декларациям стиля в медиа-запросе.

источник

2014-02-06 20:26:11 Faust

Идеальное объяснение. – Tiago

Mobile.css переопределить default.css

ответ

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