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

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 */ 
} 

而且我觉得困惑，我应该使用这些@media查询3或只是一个覆盖横向和纵向。有人可以解释我的区别吗？

Answer 1

in first查询您为纵向和横向定义样式。 秒媒体查询您只需设置想要在智能手机处于横向模式时应用的样式 和最后查询是您要在其中以纵向模式输入智能手机样式的位置。 测试其更好使用响应式设计调整大小工具像http://lab.maltewassermann.com/viewport-resizer/