在CSS中爲桌面和手機使用@media查詢

我正在開發一個網站，根據用戶瀏覽器的寬度應用不同的CSS樣式。在CSS中爲桌面和手機使用@media查詢

選擇的方法是使用CSS媒體查詢。

我的問題是這樣的：當我用下面的代碼

@media screen 
and (min-width: 200px) 
and (max-width: 800px) 
{ 
    #example 
    { 
     background: purple; 
    } 
}

這作品時，我調整我的電腦窗口，但不是由我的手機，分辨率爲範圍內的認可。

或許更perculiarly，當我用下面的代碼

@media screen 
and (min-device-width: 200px) 
and (max-device-width: 800px) 
{ 
    #example 
    { 
     background: purple; 
    } 
}

這有相反的效果：在手機上顯示，而不是在PC上。

據我看過，沒有餘地的「OR」操作沿着以下線的東西是有效

@media screen 
and (
     ((min-width: 200px) and (max-width: 800px)) 

     |/||/OR 

     ((min-device-width: 200px) and (max-device-width: 800px)) 
    ) 
{ 
    #example 
    { 
     background: purple; 
    } 
}

所以我的問題是：有沒有辦法測試響應同時在桌面和手機上使用CSS？

我已經嘗試了這麼多的組合：使用@media only screen，採用Android，Firefox和Chrome瀏覽器的手機，上，但無濟於事，結果總是一樣的。

我現在唯一能做的就是創建兩個獨立的樣式表，一個用於桌面和一個用於手機，但這意味着每次我想要查看瀏覽器中的更改時都更新兩個樣式表，是不切實際的並反駁響應的想法。

我看着使用orientation: landscape/portrait目標，但據我所知，這將再次涉及到編寫兩套CSS。

最後一個考慮因素是該網站目前正在使用純CSS;所以在這個時候沒有javascript，用戶代理確定或服務器端腳本。

這一定是可能的，所以任何見解將不勝感激。我確定有人會遇到同樣的問題並啓發我。

來源

2013-10-08 verbumSapienti

[CSS3 media queries not working]的重複可能性（http://stackoverflow.com/questions/7859336/css3-media-queries-not-working） – cimmanon

嘗試使用視meta標籤：

<meta name="viewport" content="width=device-width,initial-scale=1" />

將是到您的網頁的頭部分。

來源

2013-10-08 16:21:40

在CSS中爲桌面和手機使用@media查詢

回答

相關問題