嘿， friend 们，出于某种奇怪的原因，min-width(1800px) 的媒体查询不起作用？我正在使用我的 friend 1900px 显示器，当我缩小到 1800px 时，(1700px) 的媒体查询正在捕获？此媒体查询位于 1800px 查询上方，因此顺序正确。我很困惑任何帮助都会很棒。谢谢:)
https://jsfiddle.net/sre3vb7y/
p.s 下面发布的 html 就在那里，所以我可以发布这个 fiddle 链接。
<!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>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>最佳答案
您使用的是 @media screen and (min-width: 1800px){} 它意味着高于或等于 1800px 不低于 1800px 这就是为什么媒体查询无法缩小到 1800 像素，而是使用 max-width:1800px
关于html - 媒体查询(最小宽度 : 1800px) isn't working at 1800px?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55624832/