Question

我是响应式设计的新手，到目前为止我还没有正确使用它。我的问题是我需要为横向和纵向模式为480 * 800和480 * 856设备编写两个媒体查询。请解释一下它是如何工作的？

我尝试了这个查询，它似乎适用于横向模式的设备

@media only screen and（min-width：480px）and（max-width：854px）and（orientation：landscape）

Answer 1

@media all and (max-width: 480px) and (min-width: 480px) and (min-height:800px) and (max-height:856px)
{
   body {
      background-color:lime;
   }
}

这将使用相同的css代码定位两个设备。

或者，您可以将其拆分为两个媒体查询并定位每个平台。

当我不熟悉响应式设计时，我发现这篇文章非常有用：http://css-tricks.com/css-media-queries/

Answer 2

您可以尝试以下css样式：

media screen (max-width: 480px) and (max-height:856px) {
    //code
}

media screen (max-width: 480px) and (max-height:800px) {
    //code
}

media screen and (max-width: 856px) {
    //code
}

media screen and (max-width: 800px){
    //code
}

如何为480 * 800和480 * 856设备编写媒体查询？

2 个答案: