媒体查询不响应在桌面上更改浏览器大小

Question

我的媒体查询不起作用，谁能看到我遗漏了什么？我试过添加：

！重要；在媒体查询 css 声明后
向媒体查询 css 声明添加 css 祖先特异性

运气不好。我在 header 中有元视口标签。这是我的 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（默认）添加到另一个最小宽度为 501 像素的媒体查询。然而，这不是必需的，我遇到过字符被跳过的问题，因为它们是从网站复制的错误格式。

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

在 CSS 中，我们有一个层次结构来决定如何 select 元素及其在样式表中的位置。例如下面的 CSS select 或者：

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

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

但是如果我们声明如下：

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

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

这里的问题出在select各位。更深入的 select 或（更长/包括更多中间子项）将覆盖任何其他的，如此 JSFiddle.

所示

希望对您有所帮助！

Answer 2

您似乎没有在 post 中提供完整的 HTML 片段。尽管如此，也许可以尝试：

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

媒体查询不响应在桌面上更改浏览器大小

Media Query not responding to changing browser size on desktop

css

media-queries