同时针对智能手机纵向和横向的媒体查询

Question

我希望将一些样式应用于智能手机，无论是纵向还是横向。

是否有针对这两种情况的良好媒体查询？实际上我必须用两个媒体查询重复css：

.selector {

// smartphone portrait
@media (min-width: 320px}) and (max-width: 512px}) {
    // stuff
}

// smartphone landscape
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
    // same stuff
}

}

Answer 1

我相信，如果您创建一个媒体查询，其中 min-width 是纵向手机屏幕宽度，max-width 是横向手机屏幕宽度，无论方向如何，它都应该涵盖所有内容。