html - 使用基于设备而不是宽度的 CSS @media

Question

我知道如何使用 @media 根据最大​​宽度定位特定设备，就像这样

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

但是有没有一种基于设备的快速方法，就像这样

@media screen and (min-width: small) {
    body {
        background-color: lightgreen;
    }
}


@media screen and (min-width: medium) {
    body {
        background-color: black;
    }
}

Answer 1

是的，使用 CSS 预处理器，例如 Sass，您可以:

$small: 480px;
$medium: 720px;

@media screen and (min-width: $small) {
    body {
        background-color: lightgreen;
    }
}


@media screen and (min-width: $medium) {
    body {
        background-color: black;
    }
}