媒體查詢 - 手機VS桌面瀏覽器

我看到許多網站都在桌面瀏覽器和手機瀏覽器的響應兩者，我工作的一個網站，我有以下樣式設置：（希克斯設計的網站是一個很好的例子我想要達到什麼，如果你需要一個）媒體查詢 - 手機VS桌面瀏覽器

/* Normal styles go here */ 

@media screen and (min-device-width:321px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:701px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:1025px) 
{ 
    /* Styles */ 
} 
@media screen and (min-width:2049px) 
{ 
    /* Styles */ 
}

但是我上面的樣式表似乎只適用於桌面瀏覽器。（使用Android Firefox和索尼Xperia Ray上的默認Android瀏覽器進行測試）

Hicks設計網站的規則與我的非常相似，但它們使用最小和最大值，但對我而言似乎並不工作移動和桌面瀏覽器。（我計劃優化我的媒體查詢更多，我只是想讓基本功能正如我現在所希望的那樣）。

如果我使用的，而不是最大寬度最大設備寬度變得敏感的移動瀏覽器，而不是桌面瀏覽器...

我曾嘗試以下來解決這個問題如下：

@media screen and (max-width:480px), screen and (max-device-width:480px) 
{ 
    /* Styles */ 
}

也：

@media screen and (max-width:480px), and (max-device-width:480px) 
{ 
    /* Styles */ 
}

不過，我不認爲任何這些都是正確的，因爲Firefox的Web開發工具欄抱怨它。我也嘗試了上述規則的一些變化，但仍然無法實現。

據我所知最大寬度讀取視窗寬度（說..瀏覽器窗口的.the寬度）和max-設備寬度讀取您正在使用，以查看該網站的屏幕的實際寬度。 - 我很困惑爲什麼max-width似乎沒有讀取手機的瀏覽器寬度。

我想我可能是缺少有關此媒體查詢了一些東西明顯...這似乎並沒有什麼意義，如果我想我的網站響應在桌面和移動瀏覽器，我必須讓我的所有媒體的副本查詢，並將查詢從'屏幕和（最大寬度）'更改爲'屏幕和（最大設備寬度）'，反之亦然。（我很慚愧地連在此處鍵入作爲一種解決方法）

我怎樣才能結合（最大寬度）和（最大設備寬度）的規則或我怎麼能做到這一點？

如果你不想閱讀所有上述：

我使用@media屏幕（最大寬度：480像素），但它似乎只@media屏幕（最大設備寬度：480像素）適用於手機。如何結合這兩個規則在移動和桌面瀏覽器上實現響應式設計？

來源

2012-10-23 Dan

有很多媒體在那裏，如果你只想通過它的屬性選擇，使用all關鍵字：

@media all and (max-width:480px) 
{ 
    /* Styles */ 
}

編輯：

合併規則，或：

@media all and (prop1:val1), all and (prop2:val2) 
{ 
    /* Styles */ 
}

合併規則，和：

@media all and (prop1:val1) and (prop2:val2) 
{ 
    /* Styles */ 
}

來源

2012-10-23 12:26:46 pozs

@media screen and (min-width:240px) and (max-width:480px), 
    screen and (min-device-width:240px) and (max-device-width:480px) 
{ 
    /* Styles */ 
}

解決了這個問題，以前的答案幫助我如此投票。謝謝。

來源

2012-10-23 14:07:38 Dan

媒體查詢 - 手機VS桌面瀏覽器

回答

相關問題