Если есть media query использовать его иначе брать дефолтное значение?

Question

[Dauren S]

Ситуация такая:
Если в template.css прописать какое то свойство, а для ммаленьких экранов и мобилок прописать медиа запросы, то он полюбому будет брать значение из template.css и проигнорирует то что в медиа запросы, как сделать чтобы он сначала искал в медиазапросах, а потом в template.css

Answer 1

[Денис Инешин]

Логично делать наоборот. Значение по умолчанию в обычном коде, а все модификации в медиа запросах.
Причем лучше всего по умолчанию сделать мобилки. Метод называется mobile first и позволяет проектировать сайт от меньшего к большему и избежать загрузки слишком больших изображений для мобильных устройств.

Comments

[Dauren S]

ну например в template.css .head{font-size:24px} а в медиа запросе .head{font-size:15px;} то он полюбому берет из template.css и перечеркивает то в медиа запросе

Answer 2

[Dauren S]

Все сделал, можете делать так в template.css прописать свойство со значениями дефолтными, а в медиа запросах переписать с !important и он перечеркнет то что в temlate.css

Comments

[Сергей delphinpro]

импортант - это костыль.
CSS свойства применяются согласно своей специфичности, либо, если специфичность одинаковая, по порядку объявления в коде. медиа-запросы специфичность не повышают. Это значит вам сначала нужно объявить обычно правило. а потом ниже по коду медиазапрос. Если медиазапросы у вас в отдельном файле, то этот файл следует подключать после основного. Вот и всё. Никаких импортантов.