html - 元视口(viewport)标签和 css 媒体查询的问题

Question

好的，

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

我有一个网站，一个投资组合网站，我有响应。有一天，响应式的东西停止工作了。我开始研究它，但没有运气。我已经确保使用元视口(viewport)标签，但那只是没有做任何事情。这是我的 <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

Answer 1

好的，我想出了问题。真是愚蠢，小问题。它在我的媒体查询行中；这是我的:

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

但是你必须具备的是:

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

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

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

谢谢!