元视口标签和 CSS 媒体查询的问题答案

【问题标题】：Issues with meta viewport tag and css media queries元视口标签和 CSS 媒体查询的问题
【发布时间】：2013-09-30 12:41:00
【问题描述】：

好的，

我知道有很多关于 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

【问题讨论】：

在CSS文件中，你提到的那些样式被注释掉了。
我知道有一个，但是文档后面的样式也不起作用。
那么大型浏览器和移动浏览器之间应该有哪些不同呢？你能举一个实际的例子吗，我的意思是，一个没有被注释掉的例子？
好吧，有一个真实的例子，当浏览器窗口变小时，主导航的第二级应该有一个高度变化。

标签： html css responsive-design media-queries

【解决方案1】：

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

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

但你必须拥有的是：

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

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

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

谢谢！

【讨论】：