Есть сайт который написан для десктопов, теперь нужно сделать его респонсив для мобильных устройств, я делаю
@media screen and (max-width: 800px) {
* {
display: block; /* просто проверка */
}
}
Моя проблема в том, что такие стили не применяюся без !important
, я понимаю, так происходит поскольку стили которые я пишу с медиа-запросом не "покрывают" стили десктопной версии, а отображаются вместе с ними. Как правильно подключить .css
для мобильной версии сайта чтобы подключались только они, а не вместе со стилями десктопа?
Подключаю стили вот так:
<link rel="stylesheet" href="css/style.css">
style.css
выглядит так:
... Код для десктопа
@media screen and (max-width: 800px) {
* {
display: block; /* просто проверка */
}
}
Вот весь файл стилей style.css
. Стили на 500 строк, поэтому подумал, что файл на хостинге будет лучше
P.S. Я пишу стили с медиа запросом в файле с десктопными стилями, понимаю что плохо, но как сделать иначе не знаю
P.S.S. Ответы которые я находил гуглив свой вопрос были 3-8 летней давности, я подумал что что-то да могло поменяться
!important
старые стили не перезаписываютсяimportant
ваши старые стили не перезаписываются, ожидаю код