Как правильно подключить стили для мобильной версии сайта

Question

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

@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 летней давности, я подумал что что-то да могло поменяться

Answer 1

Если нужно в одном файле всё написать, и чтобы десктопные стили не применялись на мобильнике, то сделайте ограничение стилей для десктопа:

@media screen and (min-width: 801px) {
    ... тут десктопные стили
}

@media screen and (max-width: 800px) {
    ... тут мобильные стили
}

Если же нужно только некоторые стили перебить, а не отключить десктопные совсем, то вам в любом случае придётся делать их более специфичными - добавлять вложенность в селектор или делать !important.

Если нужно не в одном файле, то подключайте стили в шапке HTML-страницы сразу с указанными условиями:

<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 801px)">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 800px)">

БЛОГ НА HUSL

Как правильно подключить стили для мобильной версии сайта

Ответы (1 шт):