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

我看到了关于媒体查询的问题，我曾经想过同样的问题。但是，在我看来，fubar和Raptor的答案都是正确的。

那就是说，我想指出一种使用媒体查询的方法，我个人认为这种方法可能是更通用的方法之一。

我个人认为，使用谷歌Chrome的开发者工具并慢慢缩小屏幕大小，以查看网站的某些方面看起来很尴尬，或只是简单的休息，注意这些屏幕尺寸，然后在这些断点处编写媒体查询可能是使您的网站在各种各样的屏幕尺寸上看起来很好的最佳方式。

从我个人的经验来看，一旦我开始专注于特定的设备尺寸，特别是在处理Android与Apple产品的不同屏幕尺寸时，我不可避免地需要整个产品线来解决不同的问题。屏幕尺寸等级。这使得代码可以在匆忙中变得错综复杂！

我知道这个答案没有特定的代码，可以被视为比Dev Bible事实更多的意见，但我强烈地感觉到我描述的方法是那个（特别是如果你不是太有经验而且不是了解各种类型的移动设备屏幕尺寸/分辨率将产生最多样化的结果。

我希望能帮助puk。如果您或任何人有不同的感受或想提出相反的意见，请随时提出。我并不声称知道一切，我总是渴望学习新的东西，方法和观点！

Answer 2

是的，使用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;
    }
}

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

2 个答案: