具有特定最大宽度及以下的@media查询无效

时间：2017-03-01 22:11:49

标签： css css3 responsive-design media-queries responsive

我不确定我在这里缺少什么，但我正在使用的浏览器并没有从最大宽度960px及以下读取我的样式。任何人都知道是什么导致了这个？任何帮助都感激不尽。顺便说一句，我的浏览器是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>

1 个答案:

答案 0 :(得分：0)

我认为你要覆盖所有规则，因为你要声明最大宽度但不是最小宽度。所以你的规则是堆叠的，它们都是从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*/
}

以及所有规则，遵循这个逻辑。

如果有效，请告诉我。

相关问题
最新问题