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

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/