媒体查询（最小宽度：1800像素）在1800像素下不起作用？
[英]media query of (min-width: 1800px) isn't working at 1800px?
问题描述
Hey friends for some odd reason the media query of min-width(1800px) isn't working? 
嘿朋友，出于某种奇怪的原因，最小宽度（1800px）的媒体查询无法正常工作？ I'm using my friends 1900px monitor and when I shrink down to 1800px the media query of (1700px) is catching instead? 我正在使用我的朋友1900px显示器，当我缩小到1800px时，正在捕获（1700px）的媒体查询？ this media query is placed above the 1800px query, so the order is right. 此媒体查询位于1800px查询上方，因此顺序正确。 I'm confused any help would be awesome. 我很困惑，任何帮助都很棒。 Thanks:) 谢谢：）
https://jsfiddle.net/sre3vb7y/ https://jsfiddle.net/sre3vb7y/
ps the html posted below is just there so I can post this fiddle link. ps下面发布的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>PO 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> - PO 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>
1 个解决方案
解决方案1
0 2019-04-11 05:00:27
您正在使用@media screen and (min-width: 1800px) {}的意思是等于或大于1800px不小于1800px这就是为什么媒体查询无法缩小到1800px的原因，而您使用了max-width:1800px
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS替换最小宽度为1px的媒体查询 - CSS replace media query that has 1px min-width
@media屏幕（最小宽度：1200像素）在Chrome中不起作用 - @media screen (min-width:1200px) not working in Chrome
使用Chrome Devtools，我的分辨率为1680px，但是最小宽度：1440px的媒体查询不起作用 - Using Chrome Devtools, I have the resolution @ 1680px, but a min-width:1440px media query is not working
媒体查询最小宽度1200像素不起作用 - Media query min-width 1200px doesn't work
使用CSS覆盖Bootstrap @media（最小宽度：768px） - Overriding Bootstrap @media (min-width: 768px) using CSS not working
为什么我的最大宽度为 470 像素的媒体查询不起作用？ - Why isn't my media query with a max width of 470px working?
媒体查询中的最小宽度不能正常工作 - min-width in media query is not working as it should be
400像素的CSS媒体查询无法正常工作 - CSS media-query at 400px isn't working
文字在@media屏幕上居中对齐，并且（min-width：992px）和（max-width：1199px） - text not aligns to centers on @media screen and (min-width:992px) and (max-width:1199px)
我的横幅图片未使用“@media (min-width: 320px) and (max-width:767px)”显示 - My banner picture is not displaying using “@media (min-width: 320px) and (max-width:767px)”
相关标签