智能手机，平板电脑的纵向和横向查询

Question

我看到了这篇文章：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

它显示了各种@media查询，我认为这些查询非常有用。但我有点困惑。它包括：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

我发现它令人困惑，我应该使用其中的3个@media查询，还是仅使用一个涵盖风景和肖像的查询。有人能为我解释一下这个区别吗？

Answer 1

在第一次查询中，您可以为纵向和横向定义样式。 在第二次媒体查询中，您只需设置智能手机处于横向模式时要应用的样式 并且最后查询是您要在智能手机中以纵向模式输入样式的位置。 用于测试它更好地使用响应式设计调整大小工具，如http://lab.maltewassermann.com/viewport-resizer/