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

但是我觉得将一个媒体查询用于横向，另一个用于纵向方向会简单得多，但我还没有找到任何人推荐的。

我想你可能想要设计一些更具特色的平板电脑。但是只谈到手机，如果你想要特定的CRAZY，我只能为每个设备提供不同的媒体查询。

有什么理由吗？我应该为每个设备添加媒体查询，还是安全＆＃34;继续只有两个媒体查询？

Answer 1

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

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

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

Answer 2

只需一两个媒体查询即可完全取消它。我一直在为平板电脑做这件事，然后在适用于所有设备的完全响应式网站上进行移动。当开发人员希望拥有此大小和该大小的网站的固定版本时，这些类型的充实媒体查询是针对非常特定的大小。

@media screen and (max-width: 1024px) {
    /* Landscape style changes */
}

@media screen and (max-width: 768px) {
    /* Portrait to mobile style changes */
}

@media screen and (max-width: 450px) {
   /* Maybe one more because that header text doesn't fit anymore on smaller screen */
}

代码的其余部分也一样好，但是如果你有干净的CSS，这应该不是问题。

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

2 个答案: