在使用媒体查询时，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无法在移动设备上工作

回答

相关问题