Медиа-запросы не работают, возможна проблема с синтаксисом

Обычно медиа-запрос обходит CSS в файле CSS, а не внутри <link>...

@media only screen and (max-device-width: 1024px) {

    .color {
        height:100%;
    }

    .anim {
        height: 0%;
    }

    .scrollup {
        display: none;
    }

    .scrolldown {
        display: none;
    }

    .menu-icon {
        display: none;
    }

}

На самом деле существует 2 формы медиа-запроса.

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css"/>

а также

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Кроме того, я заметил, что вы используете "Только" и "И" вместе в своем медиа-запросе. Вот некоторая информация об этих двух вещах:

" И " Ключевое слово и используется для объединения нескольких медиа-функций вместе, а также для объединения медиа-функций с типами носителей. Основной мультимедийный запрос, единственная функция мультимедиа с подразумеваемым всеми типами мультимедиа, может выглядеть так:

@media (min-width: 700px) and (orientation: landscape) { ... }

" Only " Единственное ключевое слово предотвращает использование более старых браузеров, не поддерживающих мультимедийные запросы, с помощью средств массовой информации от применения заданных стилей:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Запросы СМИ нечувствительны к регистру. Запросы СМИ, связанные с неизвестными типами носителей, всегда являются ложными.

Как сообщает @unknowndomain, медиа-запрос входит в файл CSS, а также вы должны иметь метатег Viewport внутри вашего документа.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">

Если вы не поместите этот тег, медиа-запросы не будут работать.