Question

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

我正在研究媒体查询，但我需要指定min / max px似乎非常麻烦。并为每种类型的手机进行单独的媒体查询，例如iphone4，iphone5，iphone6，iphone6plus等，因为它们有不同大小的屏幕。

我想要的主要是设置一个css，我说，＆＃34;对于景观中的所有移动设备执行此操作＆＃34;和＆＃34;对于所有移动设备的纵向执行此操作＆＃34;。我不想详细介绍它是什么类型的移动设备，也不想弄清楚具体的屏幕尺寸。我甚至不想要＆＃34; px＆＃34;基本上出现在我的媒体查询中。

同样，我想知道它是否是平板电脑的肖像/风景。如果它是一个桌面。

使用媒体查询有一种简单的方法吗？

Answer 1

您不希望为每个特定的移动设备创建不同的布局，因为它将是一个不断增长的设备列表，它根本不具备可靠性。然而，区分桌面和移动设备也不容易。想想平板电脑与上网本电脑的屏幕分辨率，它们几乎是相似的。

在我看来，设计断点的最佳方法是从移动视图开始，并继续扩展屏幕大小，直到您认为设计不再起作用为止。此时，您应该包含一个断点并更新您的设计（可能添加侧边栏，显示扩展菜单等）。

所以不幸的是，我认为没有一种简单的方法可以区分移动桌面设备，唯一容易的选择就是找到一个基于像素的断点（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 */
}

没有指定媒体查询的像素？

1 个答案: