在使用媒體查詢時，CSS無法在移動設備上工作

我正試圖讓媒體查詢在移動設備上工作。我已經使用了適當的@ media查詢以及最小/最大寬度尺寸。它適用於我的電腦，但不適用於我的移動設備。另外請注意，我在頭部添加了適當的meta標籤。在使用媒體查詢時，CSS無法在移動設備上工作

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

@media only screen and (max-width: 480px){ 
    #top-table{ 
     background-color: green; 
    } 
}

我使用的是三星GalaxyS5但我想它在多個設備上工作。我正在使用Chrome。當我改變我的瀏覽器的大小時，它工作正常，但在移動設備上沒有變化。

來源

2016-07-29 Kevin

我們很樂意嘗試和幫助，但我們的魔法水晶球（巧合）都在店裏得到修復。由於我們無法閱讀您的想法，因此我們必須結束這個問題。 –

含義......如果您抱怨媒體查詢無法正常工作，您應該*顯示*他們。並告訴我們使用什麼樣的瀏覽器，以什麼樣的分辨率使用什麼樣的移動設備。 –

@Kevin歡迎來到Stack Overflow！我們不知道你在這裏問什麼。您需要向我們展示重現問題所需的最少代碼量，以及遇到的任何錯誤。描述所需的行爲，你從中得到什麼，以及爲什麼你認爲它可能不工作。 – Ares

很難說沒有任何更多的信息，但我能想到的一些事情是我的頭頂會檢查你是否正確地將它包含在你導入的任何css下面，例如它將需要在這裏：

<link rel="stylesheet" type="text/css" href="css/normalize.css"> 
<link rel="stylesheet" type="text/css" href="css/main.css"> 
<link rel="stylesheet" type="text/css" href="css/responsive.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

另一個要考慮的是要確保你已經鏈接的CSS，媒體查詢被正確包括在內。我知道這聽起來很愚蠢，但請確保仔細檢查！最後，我的頭上最後一件事情是，你已經正確使用了媒體查詢。根據上述示例，最好將它們包含在一個單獨的文件中，並確保您知道它們的順序。如果您嘗試使用移動優先平臺，那麼您需要通過min-寬度與頂部的最低屏幕分辨率。反之亦然，如果你正在做一個桌面第一個應用程序。如果你仔細檢查過所有這些，那麼我只能想到只保存所有內容並重新啓動程序，聽起來很愚蠢，但我已經在幾個不同的IDE中多次嘗試，重新啓動看起來固定的一些問題。最好的祝願！

編輯

嘗試（使用自己的代碼明顯）格式化像這樣，看看是否能解決一些問題！

@media screen and (min-width: 500px) { 

    /*****BODY*****/ 

    #disp2 { 
     display: inline; 
    } 

    #wrapper img { 
     width: 45%; 
     float: left; 
     margin: 2.5%; 
    } 

    #wrapper .cycle-slideshow img { 
     width: 95%; 
     float: left; 
    } 

    .secondary-content2 { 
     max-width: 450px; 
     margin: 0 auto; 
     padding: 2.5%; 
    } 

    /**************/ 

    }

來源

2016-07-29 20:44:40 Boo89100

OK謝謝大家的幫助，它是元的位置。 – Kevin

在使用媒體查詢時，CSS無法在移動設備上工作

回答

相關問題