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

Question

我正在尝试让媒体查询在移动设备上工作。我使用了正确的@媒体查询以及最小/最大宽度尺寸。它可以在我的计算机上运行，​​但不能在我的移动设备上运行。另请注意，我已在头部添加了正确的元标记。

<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%;
    }

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

    }