Question

好，

我知道有很多关于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上看到该网站，它在桌面上看起来不错，但不像我想要的那样在任何移动设备上。

谢谢！

P.S。

我不知道这是否重要，但该网站是在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和(之间有一个空格。

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

谢谢！

元视口标记和css媒体查询的问题

1 个答案: