Question

嘿朋友出于某种奇怪的原因，最小宽度（1800px）的媒体查询无法正常工作？我正在使用我的朋友1900px显示器，当我缩小到1800px时，正在捕获（1700px）的媒体查询？此媒体查询位于1800px查询上方，因此顺序正确。我很困惑，任何帮助都很棒。谢谢：）

https://jsfiddle.net/sre3vb7y/

p.s以下是发布的html，因此我可以发布此小提琴链接。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Contact | Kane Concrete & Construction LLC</title>
	<link rel="stylesheet" href="contact.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
	<header>
		<div class="contact-wrapper">
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1" id="m1"></div>
						<div class="m2" id="m2"></div>
						<div class="m3" id="m3"></div>
					</div>
					<ul>
						<li class="after"><a href="index.html">Home</a></li>
						<li class="after"><a href="about.html">About</a></li>
						<li class="after"><a href="about.html#services">Services</a></li>
						<li class="after"><a href="careers.html">Careers</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div>
			</nav>

			<h1>Contact Us</h1>
		</div>	
	</header>

	<section class="contact" id="quote">
		<h2>Get in touch</h2>

		<div class="container">
			<div class="quote-info">
				<p>Get a Quote</p>

				<input type="text" placeholder="First Name">
				<input type="text" placeholder="Last Name">
				<input type="text" placeholder="Phone Number">
				<input type="text" placeholder="Email">

				<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>

				<button class="send-quote">Send</button>
			</div>

			<div class="contact-info">
				<h3>Contact info</h3>

				<div class="contact-numbers">
					<div>
						<i class="fas fa-phone"></i>
						<p>(208)546-7827 -Matt</p>
						<i class="fas fa-phone"></i>
						<p>(208)546-7827 -Keegan</p>
					</div>

					<div>
						<i class="fas fa-envelope"></i>
						<p>P.O. Box 50860 IF, ID 83405</p>
						<i class="fas fa-at"></i>
						<p>KaneConcrete@fake.com</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<hr>
	
	<section class="footer">
		<div class="wrapper">
			<div class="links">
				<div class="inner">
					<h1><span>Quick Links</span></h1>

					<a href="index.html">Home</a>
					<a href="about.html">About</a>
					<a href="about.html#services">Services</a>
					<a href="careers.html">Careers</a>
					<a href="contact.html">Contact</a>
					<a href="contact.html#quote">Quote</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1><span>Social</span></h1>

					<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
					<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
					<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send is some feedback..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1><span>Contact</span></h1>

					<p>(208)546-7827 - <span class="dark">Matt</span></p>
					<p>(208)546-7827 - <span class="dark">Keegan</span></p>
					<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
					<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
				</div>
			</div>
		</div>
		
		<div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
	</section>
	<script src="../script.js"></script>
</body>
</html>

Answer 1

您使用的@media screen and (min-width: 1800px) {}等于或高于1800px等于1800px，这就是为什么媒体查询无法缩小到1800px的原因，而是使用max-width:1800px

媒体查询（最小宽度：1800像素）在1800像素下不起作用？

1 个答案: