Question

我的媒体查询刚刚开始工作，有人能看到我错过的内容吗？我尝试过添加：

重要！;媒体查询css声明后
将css祖先特异性添加到媒体查询css声明

没有运气。我在标题中有元视口标记。这是我的HTML：

<!DOCTYPE html> 
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,700italic' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<link rel="stylesheet" href="css/jquery.fadeshow-0.1.1.min.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="abc" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery/jquery.fadeshow-0.1.1.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#nav').click(function() {
$(this).toggleClass('open');
});
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
</head>

和css

.container {
 position: relative;
 margin: 0 auto;
 width: 100%;
 max-width: 1024px;
 font-family: "Source Sans Pro", sans-serif;
 font-weight: 400;
 color: #1a1a1a;
 line-height: 150%; 

}
.content {
 position: relative;
 padding: 43% 17% 3%;

}

h1 {
 font-family: "Source Sans Pro", sans-serif;
 font-weight: 700;
 font-size: 2.5em;
 font-style: italic;
 color: #426432;
 text-shadow: 0px 0px 1.3em white, 0px 0px 1.3em white, 0px 0px 1.3em white;
 line-height: 150%;
 text-align: center;
 margin-bottom: 50px;
 margin-left: -15px;
}

@media screen and (max-width: 500px){

.content {
  padding: 43% 5% 3%;

 }

 h1 {
     font-size: 1.65em;
     line-height: 150%;
     margin-bottom: 30px;
 }

 .body {
     font-size: 1em;
     letter-spacing: .01em;
     line-height: 150%;
 }
}

有什么想法吗？

Answer 1

我可以建议您将备用css（默认）添加到min-width 501px的另一个媒体查询中。然而，这不是必要的，我遇到了跳过字符的问题，因为它们是从网站复制的错误格式。

发生了什么或没发生什么？没有变化吗？我以前处理过这个问题，这一直是一个奇怪的问题。所以这里有一些关于CSS行为的想法和例子。

在CSS中，我们有一个层次结构，决定了你如何选择元素以及它在样式表中的位置。以下面的CSS选择器为例：

body .test-parent .test-child {
    color: red;
}
body .test-parent .test-child {
    color: blue;
}

在这种情况下的结果将返回color: blue;作为最终样式，因为它是该元素颜色值的最后一个读取声明。

但是，如果我们宣布以下内容：

body .test-parent-two .test-child-two {
    color: red;
}
body .test-child-two {
    color: blue;
}

然后最终值为color: red;。这让我措手不及，我花了一段时间才注意到这个模式并修复了。

这里的问题在于选择器。如JSFiddle所示，更深入的选择器（更长/包含更多中间儿童）将覆盖任何其他选择器。

希望这也有帮助！

Answer 2

您的帖子中似乎没有提供完整的HTML代码段。尽管如此，也许可以尝试：

@media (max-width: 500px) {
    /* your code here */
}

Media Query无法响应更改桌面上的浏览器大小

2 个答案: