使用CSS @media根据设备而不是宽度

我知道如何使用@media就能根据最大宽度的特定设备，像这样使用CSS @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; 
    } 
}

来源

2017-08-07 puk

这将打开一罐蠕虫。什么被认为是“小”还是“中”？如果你能回答这个问题，你可以在通常的'@ media'查询中使用这些维度。 – fubar

您可能不能，除非设备具有独特的功能。这不是媒体查询是专为 – Raptor

设计的每个规则总是有例外，但具有特定大小“类别”的设备通常会共享您可以定位的某些次要特性，例如[Interaction Media Features]（https：// drafts.csswg.org/mediaqueries-4/#mf-interaction）或[指向设备质量：指针功能]（https://drafts.csswg.org/mediaqueries-4/#mf-interaction） –

是有，使用CSS预处理，如萨斯，你可以这样做：

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

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


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

来源

2017-08-07 05:33:15

我看到你关于媒体查询的问题，我曾经想过同样的问题。然而，在我看来，fubar和Raptor在他们的答案中是正确的。

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

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

从我个人的经验来看，一旦我开始过度关注具体的设备尺寸，特别是在处理Android和苹果产品的不同屏幕尺寸时，我不得不停下整条产品线去钉钉不同类别的屏幕尺寸。这使得代码可以变得匆忙地变得复杂！

我知道这个答案没有特定的代码，可以被认为比开发圣经的事实更多的意见，但我强烈地感到，我所描述的方法是那个（特别是如果你不太经验，是没有意识到各种类型的移动设备屏幕尺寸/分辨率）将产生最通用的结果。

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

来源

2017-08-07 02:40:52

嘿fubar ...关于检查Bootstrap和基金会以查看他们的断点的绝佳建议！呃......我希望我能想到这个！ :) –

使用CSS @media根据设备而不是宽度

回答

相关问题