使用媒体查询时，CSS无法在移动设备上运行

Question

我正在尝试将媒体查询用于移动设备。我使用了正确的@ media查询以及最小/最大宽度大小。它适用于我的计算机，但不适用于我的移动设备。另请注意，我在头部添加了正确的元标记。

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

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

虽然我希望它可以在多种设备上运行，但我使用的是三星GalaxyS5。我正在使用Chrome。当我改变浏览器的大小时，它可以正常工作，但在移动设备上没有任何变化。

Answer 1

如果没有任何更多的信息，很难说是肯定的，但我可以想到的一些事情就是检查你是否已将其正确地包含在你导入的任何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%;
    }

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

    }