Строгое сравнение в min-width и max-width

#css #media_queries

Если одновременно использовать @media (max-width: 1000px) и @media (min-width: 1000px),
то при ширине ровно 1000px будут выполняться оба правила

Если использовать @media (max-width: 1000px) и @media (min-width: 1001px), то при
масштабе в 1,25 и ширине 1251px не будет выполняться ни одно из этих правил (т.к. 1251/1,25=1000,8)

Вопрос: как сделать так, чтобы одно правило выполнялось при ширине меньшей либо равной
1000px, а другое выполнялось при ширине строго большей 1000px?
    

Ответы

Ответ 1

Задачу решает использование оператора отрицания для второго медиа-запроса.

@media not all and (max-width: 1000px) {
    /* ... */
}