0

好的，

我知道有很多关于 CSS 媒体查询和响应式网站的元视口标签的问题。我已经阅读了很多，但我没有任何运气。

我有一个网站，一个投资组合网站，我有响应。有一天，响应式的东西刚刚停止工作。我开始研究它，只是没有运气。我已经确保使用元视口标签，但这并没有做任何事情。这是我的<meta>标签：

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

以及响应式 CSS 文件的一部分：

@media screen and(max-width: 800px){
    /*body:before{ color: #fff; content: 'Max-Width: 800px'; }*/

    .social-media a,
    .social-media iframe{
        margin-bottom: 10px;
    }

    .level2{
        height: 140px;
    }

}

我也尝试过使用和不使用这段代码：

@-o-viewport,
@-ms-viewport{
  width: device-width;
}

令人沮丧的是，在工作中我刚刚完成了一个响应式网站并且没有任何问题。我想也许另一双眼睛可能能够捕捉到我无法捕捉到的东西。

您可以在 pjlamb12.github.io 上查看该网站，它在桌面上看起来不错，但在任何移动设备上都不像我想要的那样。

谢谢！

附言

我不知道这是否重要，但该站点位于 GitHub 页面上，并且我正在使用 Jekyll 来运行该站点。

编辑

其余代码也可以在 GitHub 中查看https://github.com/pjlamb12/pjlamb12.github.com

4

1 回答 1

3

好的，我发现了问题所在。真傻，小问题。它在我的媒体查询行中；这就是我所拥有的：

@media screen and(max-width: 800px){
    /* styles */
}

但你必须拥有的是：

@media screen and (max-width: 800px){
    /* styles */
}

你注意到区别了吗？我花了几分钟，但第一行的 theand和 the之间必须有一个空格。(

希望如果其他人有这个问题，他们会看到这个并首先尝试。

谢谢！

于 2013-09-26T04:43:51.973 回答