具有特定最大宽度及以下的@media 查询不起作用答案

【问题标题】：@media query with a specific max-width and below is not working具有特定最大宽度及以下的@media 查询不起作用
【发布时间】：2017-03-03 00:06:19
【问题描述】：

我不确定我在这里遗漏了什么，但我使用的浏览器没有读取最大宽度为 960 像素及以下的样式。有谁知道这是什么原因造成的？任何帮助都感激不尽。顺便说一下，我的浏览器是chrome。

@media only screen and (max-width: 1920px) {
	body { font-size:40px; }
	.logo { width:33%;}
	.article { margin-top:-79px; }
	.article div:first-child { padding-left:255px; padding-right:255px; }
	.products_section { margin-top:55%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 140px; }
	.address { margin-top:9%; margin-bottom:12%; }
	.address_content { padding-left: 140px; }
	.address_content div:first-child { width:32%; font-size:40px; margin-right:300px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:39px; }
}
@media only screen and  (max-width: 1680px) {
	body { font-size:33px; }
	.logo { width:33%;}
	.article { margin-top:-99px; }
	.article div:first-child { padding-left:255px; padding-right:255px; }
	.products_section { margin-top:55%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 140px; }
	.address { margin-top:11%; margin-bottom:12%; }
	.address_content { padding-left: 140px; }
	.address_content div:first-child { width:32%; font-size:35px; margin-right:300px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:20px; }
}
@media only screen and  (max-width: 1600px) {
	body { font-size:33px; }
	.logo { width:33%;}
	.article { margin-top:-99px; }
	.article div:first-child { padding-left:255px; padding-right:255px; }
	.products_section { margin-top:55%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 140px; }
	.address { margin-top:11%; margin-bottom:12%; }
	.address_content { padding-left: 140px; }
	.address_content div:first-child { width:32%; font-size:34px; margin-right:280px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:15px; }
}
@media only screen and  (max-width: 1440px) {
	body { font-size:31px; }
	.logo { width:33%;}
	.article { margin-top:-89px; }
	.article div:first-child { padding-left:255px; padding-right:255px; }
	.products_section { margin-top:50%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 140px; }
	.address { margin-top:11%; margin-bottom:12%; }
	.address_content { padding-left: 140px; }
	.address_content div:first-child { width:32%; font-size:30px; margin-right:250px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:15px; }
}
@media only screen and  (max-width: 1280px) { 
	body { font-size:29px; }
	.logo { width:33%;}
	.article { margin-top:-115px; }
	.article div:first-child { padding-left:215px; padding-right:215px; }
	.products_section { margin-top:50%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 140px; }
	.address { margin-top:12%; margin-bottom:12%; }
	.address_content { padding-left: 140px; }
	.address_content div:first-child { width:32%; font-size:29px; margin-right:200px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:15px; }
}
@media only screen and  (max-width: 1024px) { 
	body { font-size:24px; }
	.logo { width:33%; }
	.article { margin-top:-115px; }
	.article div:first-child { padding-left:185px; padding-right:185px; }
	.products_section { margin-top:50%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 90px; }
	.address { margin-top:12%; margin-bottom:12%; }
	.address_content { padding-left: 95px; }
	.address_content div:first-child { width:300px; font-size:25px; margin-right:200px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:15px; }
}
@media only screen and  (max-width: 980px) { 
	body { font-size:20px; }
	.logo { width:33%; }
	.article { margin-top:-115px; }
	.article div:first-child { padding-left:185px; padding-right:185px; }
	.products_section { margin-top:50%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 90px; }
	.address { margin-top:14%; margin-bottom:12%; }
	.address_content { padding-left: 95px; }
	.address_content div:first-child { width:300px; font-size:22px; margin-right:180px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:15px; }
}
@media only screen and  (max-width: 960px) {
	body { font-size:20px; }
	.logo { width:33%;}
	.article { margin-top:-115px; }
	.article div:first-child { padding-left:185px; padding-right:185px; }
	.products_section { margin-top:50%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 90px; }
	.address { margin-top:12%; margin-bottom:12%; }
	.address_content { padding-left: 95px; }
	.address_content div:first-child { width:300px; font-size:22px; margin-right:180px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:15px; }
}
@media only screen and (max-width: 800px) and (min-width: 768px) { 
	body { font-size:18px; }
	.logo { width:33%;}
	.article { margin-top:-115px; }
	.article div:first-child { padding-left:185px; padding-right:185px; }
	.products_section { margin-top:50%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 90px; }
	.address { margin-top:12%; margin-bottom:12%; }
	.address_content { padding-left: 95px; }
	.address_content div:first-child { width:300px; font-size:22px; margin-right:180px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:15px; }
}
@media only screen and (max-width: 767px) {
	body { font-size:16px; }
	.logo { width:33%;}
	.article { margin-top:-115px; }
	.article div:first-child { padding-left:185px; padding-right:185px; }
	.products_section { margin-top:50%; }
	.products_section div:first-child, .products_section div:nth-child(2){ padding:0 90px; }
	.address { margin-top:12%; margin-bottom:12%; }
	.address_content { padding-left: 95px; }
	.address_content div:first-child { width:300px; font-size:22px; margin-right:180px; }
	.address_content  a img { display:inline-block; width:23%; }
	.address_content  a img:last-child{ margin-left:15px; }
}
@media only screen and (max-width: 640px){
	
}
@media only screen and (max-width: 603px){
	
}
@media only screen and (max-width: 480px) { 
	
}
@media only screen and (max-width: 460px) { 
	
}
@media only screen and (max-width: 414px) { 
	
}
@media only screen and (max-width: 375px) { 
	
}
@media only screen and (max-width: 360px){
	
}
@media only screen and (max-width:320px){
	
}

<!DOCTYPE>
<html>
<head>
	<title>Koffee Korner</title>
	<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
	<link rel="stylesheet" type="text/css" href="kk_css.css">
</head>

<body style="padding:0; margin:0; background:url(https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/aff8994c-8857-42f9-9710-4ee69a139dbe.jpg) no-repeat; background-position:inherit; background-size:cover; font-family:Rockwell;">
	<div style="margin:9px; 9px 0 9px;">
		<a href="https://www.koffeekorner.ca/">
			<img class="logo" src="https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/083fdc0d-16ad-4a16-b0c8-cf61cd0d14a8.png">
		</a>
	</div>

	<div class="article" style="width:100%; color:#fff; text-align:center;">
		<div style="top:0; left:0; margin:0 auto;>
			<font style="">Introducing</font><br/>
			<h1 class="heading-tag" style="text-decoration:underline; font-size:1.5em;">KOFFEE KORNER BARRIE</h1>
			<p align="left">
				Koffee Korner is a Canadian company with locations throughout Canada. We carry over 550 flavours of coffee, tea & more including brands like Starbucks, McCafe & Tim Hortons. Visit us online or in our Barrie location at 12 Commerce Part Drive for <b>$10.00</b> off. Offer includes free shipping when your order is over <b>$59.99</b>.
			</p>
		</div>
	</div>
	
	<div style="width:100%;" class="products_section">
		<div style="top:0; left:0; margin:0 auto;">
			<a href="https://www.koffeekorner.ca/category-s/231.htm">
				<img src="https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/689d0647-32f0-4c64-b3e7-8a84c054ee47.png" width="100%">
			</a>
		</div>
		<div style="top:0; left:0; margin:0 auto;">
			<a href="https://www.koffeekorner.ca/product-p/73-581.htm">
				<img class="product" src="https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/e858b5b5-582d-4a5f-a0ac-fa532f535cfe.png" style="display:inline; width:33%;">
			</a>
			<a href="https://www.koffeekorner.ca/product-p/87-709.htm">
				<img class="product" src="https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/4b18a285-c094-43bd-8270-fb8f7637e61f.png" style="display:inline; width:32%;">
			</a>
			<a href="https://www.koffeekorner.ca/product-p/41-376.htm">
				<img class="product" src="https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/088db292-904e-4e14-9dd8-126fd5b30d67.png" style="display:inline; width:32%;">
			</a>
		</div>
	</div>


	<div style="width:100%;" class="address">
		<div style="top:0; left:0; margin:0 auto; width:100%;" class="address_content">
			<div style="float:right;">
					Koffee Korner <br> 12 Commerce Park Drive Barrie, Ontario, L4N 8W8
			</div>
			<a href="https://www.koffeekorner.ca/">
				<img src="https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/d1e677be-a60f-4d3d-88a8-3a4bd1fe7e19.png" />
			</a>
			<a href="https://www.koffeekorner.ca/">
				<img src="https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/0c9f5695-69fc-460a-b6ae-e1f51f58035b.png" />
			</a>
		</div>
	</div>

</body>
</html>

【问题讨论】：

960 及以下的媒体查询条目似乎很好 codepen.io/anon/pen/mWVpaZ stackoverflow.com/help/on-topic “寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包含所需的行为，一个特定的问题或错误，以及在问题本身中重现它所需的最短代码。”请给我们一个说明问题的minimal reproducible example。
嘿伙计，我已经更新了我的问题。我包含了我的 html，以便您看到。
960 及以下的媒体查询运行良好。请更具体地说明什么不起作用。顺便说一句，你有未封闭的引号这个标签<div style="top:0; left:0; margin:0 auto;>
对不起。 960px 及以下的最大宽度不起作用。我的意思是，当我使用浏览器的开发者模式和响应式视图检查 css 时，当屏幕宽度低于 980px 时，宽度为 960px 的样式不会在开发模式下显示。
较低的屏幕宽度仅读取 980px 的样式，即使当前屏幕为 360px。哦，很好地抓住了未封闭的标签。谢谢！

标签： css responsive-design media-queries responsive

【解决方案1】：

我认为您正在覆盖所有规则，因为您声明的是最大宽度而不是最小宽度。所以你的规则是堆叠的，它们都从 0px（没有声明最小宽度）到你的最大宽度。

即使理论上这可行，我认为始终使用最小值和最大值调用大小范围是一种更好的做法。

尝试为它们添加一个最小宽度，例如：

@media only screen and (min-width: 1681px) and (max-width: 1920px){
    /*Your Stuff*/
}

然后

@media only screen and (min-width: 1601px) and (max-width: 1680px){
    /*Your stuff*/
}

依此类推，遵循这个逻辑。

如果有效，请告诉我。

【讨论】：