html - 没有为媒体查询指定像素？

Question

我有一个基于 phonegap 的 html 应用程序，我想在桌面/ipad 和移动设备上显示它。

我正在研究媒体查询，但我需要指定最小/最大像素似乎很麻烦。并对每种类型的手机进行单独的媒体查询，例如 iphone4、iphone5、iphone6、iphone6plus 等，因为它们的屏幕尺寸不同。

我基本上想要的是设置一个 css，我说“对于所有横向移动设备都这样做”，以及“对于所有纵向移动设备都这样做”。我不想详细说明它是哪种类型的移动设备，也不想摆弄特定的屏幕尺寸。我什至不希望“px”这个词基本上出现在我的媒体查询中。

同样我想知道它是否是平板纵向/横向。 如果是台式机。

有没有一种简单的方法可以使用媒体查询来做到这一点？

Answer 1

您不想为每个特定的移动设备创建不同的布局是正确的，因为它将是一个不断增加的设备列表，它一点也不健壮。然而，区分桌面和移动设备也并不容易。想想平板电脑和上网本电脑的屏幕分辨率，它们几乎是一样的。

在我看来，设计断点的最佳方式是从移动 View 开始，并不断扩大屏幕尺寸，直到您认为设计不再适用为止。那时你应该包括一个断点并更新你的设计(也许添加一个侧边栏，显示一个扩展菜单等)。

所以不幸的是，我认为没有一种简单的方法来区分移动设备和桌面设备，唯一简单的选择是找到一个基于像素的断点(bootstrap 使用 992px)，您的桌面设计应该从中应用。

要区分纵向和横向模式，您可以使用 @media screen and (orientation: portrait) 和 @media screen and (orientation: landscape)。

例如你可以使用这样的东西:

.container {
    /* mobile devices */
}

@media screen and (orientation: landscape) {
    /* mobile devices in landscape */
}

@media screen and (orientation: landscape) and (min-width: 992px) {
    /* desktop devices */
}