未指定媒體查詢的像素？

我有一個基於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

未指定媒體查詢的像素？

回答

相關問題