0

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

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

4
  • Покажите как вы подключаете стили, предоставьте код.
    – MoloF
    8 апр 2020 в 8:41
  • @MoloF я так и сделал, но без !important старые стили не перезаписываются 8 апр 2020 в 8:41
  • Видимо не так сделали, раз без important ваши старые стили не перезаписываются, ожидаю код
    – MoloF
    8 апр 2020 в 8:42
  • @MoloF Поправил вопрос 8 апр 2020 в 8:53

1 ответ 1

0

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

@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)">
2
  • Не обязательно в одном файле, но мысль хорошая, проверю 8 апр 2020 в 9:07
  • В случае когда файлы разные, они оба грузятся, но стили применяются только из одного из них. Можно сделать, чтобы ненужный css не загружался? 7 апр 2021 в 7:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.