CSS - 为移动设备设计时仅使用一个 @media 查询是否安全？

Question

我正在做一个应该在移动设备上运行的网站。我已经研究过这个主题，每个网站都建议我对我希望网站使用的每个设备使用不同的媒体查询，例如:

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {    
}

/* etc... */

不过，我觉得仅使用一种媒体查询进行横向处理，另一种媒体查询进行纵向处理会简单得多，但我还没有发现有人推荐这样做。

我想您可能想为平板电脑设计一些更具体的东西。但仅就手机而言，如果您想要一些疯狂的特定内容，我只能为每个设备提供不同的媒体查询。

有什么理由吗？ 我应该为每个设备添加一个媒体查询还是仅使用两个媒体查询继续“安全”？

Answer 1

那绝对没问题。不要忘记将响应式元标记添加到每个页面:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后在调整预览窗口宽度和高度时使用媒体查询。这将使网站与桌面版本相同。