0

我偶然发现了这篇文章：

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 查询还是只使用一个涵盖横向和纵向的查询。有人可以为我解释一下区别吗？

4

1 回答 1

2

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

于 2013-01-20T05:53:41.143 回答