未指定媒体查询的像素？

我有一个基于phonegap的html应用程序，我想在桌面/ ipad和手机上显示。未指定媒体查询的像素？

我正在查看媒体查询，但它似乎很麻烦，我需要指定最小/最大px。并为每种类型的移动设备进行单独的媒体查询，例如iphone4，iphone5，iphone6，iphone6plus等，因为它们具有不同尺寸的屏幕。

我想要的基本上是建立一个CSS，我说，“为所有移动设备在景观做到这一点”，和“所有移动设备在肖像做到这一点”。我不想详细说明它是哪种类型的移动设备，或者具体的屏幕尺寸。我甚至不希望“px”这个词基本上出现在我的媒体查询中。

同样我想知道它是否是平板电脑纵向/横向。如果它是一个桌面。

有没有简单的方法来做到这一点与媒体查询？

来源

2014-12-13 foreyez

对于每个特定的移动设备，您都不想为其创建不同的布局，因为这将是一个不断增加的设备列表，因此它不是健壮的。但是，区分桌面和移动设备并不容易。想想平板电脑与上网本电脑的屏幕分辨率，他们几乎相同。

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

因此，不幸的是，我认为没有简单的方法来区分移动设备和桌面设备，唯一简单的选择是找到应用桌面设计的基于像素的断点（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 */ 
}

来源

2014-12-13 13:01:26 ckuijjer

感谢，从移动首先是一个伟大的想法在想这个。桌面始终被认为是“风景”？如果我的ipad肖像看起来有点不同于我的移动肖像，我想也可以想象风景如何。 – foreyez 2014-12-13 16:53:05

大多数桌面都是横向的，所以我认为这是可行的。不知道浏览器会返回什么，但桌面屏幕是肖像模式。最简单的方法是使用一个框架，比如bootstrap，它们有相当好的默认大小 – ckuijjer 2014-12-13 17:31:11

未指定媒体查询的像素？

回答

相关问题