媒体查询未响应在桌面上更改浏览器大小 [英] Media Query not responding to changing browser size on desktop
问题描述
我的媒体查询不会工作，任何人都可以看到我错过了什么？我已尝试添加：
My media query just won't work, can anyone see what I've missed? I've tried adding:
- ！important;后媒体查询css声明
- 向媒体查询css声明添加css祖先特异性
。我在标题中有元视口标签。这是我的html：
No luck. I have the meta viewport tag in the header. Here's my 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%;
}
}
有任何想法吗？
推荐答案
我可以建议您添加备用css（默认）到另一个媒体查询min-width 501px。然而这不应该是必要的，我遇到了被跳过的字符的问题，因为他们是从网站复制错误的格式。
I could suggest that you add the alternate css (default) to another media query of min-width 501px. This however shouldn't be necessary, I have encountered issues with characters being skipped as they had been the wrong format being copied from websites.
发生或没有发生什么？没有什么改变？我以前处理过这个问题，总是一个奇怪的问题。所以这里有一些CSS行为的想法和例子。
What is happening or not happening? Is nothing changing? I've dealt with this before and it's always a strange issue. So here are some thoughts and examples of CSS behavior.
在CSS中，我们有一个层次决定了如何选择一个元素和它在你的样式表中的位置。例如下面的CSS选择器：
In CSS we have a hierarchy decided both on how you select an element and on its position within your stylesheet. Take for example the following CSS selectors:
body .test-parent .test-child {
color: red;
}
body .test-parent .test-child {
color: blue;
}
在这种情况下的结果将返回 color：blue ; 作为最终样式，因为它是该元素颜色值的最后一个读取声明。
The result in this case would return color: blue; as the final style as it is the last read declaration for that elements color value.
但是，如果我们声明以下内容：
However if we declare the following:
body .test-parent-two .test-child-two {
color: red;
}
body .test-child-two {
color: blue;
}
然后最终的值是 color：red; / code>。这使我保持警惕，我花了一段时间注意到模式和修复。
Then the final value is color: red;. This caught me off guard and it took me a while to notice the pattern and fix.
这里的问题在于选择器。更深入的选择器（更长/包含更多中间的儿童）将覆盖任何其他选择器，如此 JSFiddle 。
The problem here lies in the selectors. A more in-depth selector (longer / includes more in-between children) will override any others as can be seen by this JSFiddle.
希望这也有帮助！
这篇关于媒体查询未响应在桌面上更改浏览器大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
