媒體查詢不適用於Chrome，但適用於SO編輯器

Question

 html, body { margin: 0; padding: 0; } nav li a { text-decoration-line: none; color: rgba(102,102,102,0.75); } .wrapper2 { width: 100%; height: 65vh; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.3); } header { background: blue; background-position: center; background-size: cover; height: 65vh; background-attachment: fixed; } header h1 { color: white; margin: 0; font-size: 5rem; font-family: 'Arvo'; } nav { background-color: white; width: 100%; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; z-index: 2; box-shadow: 0px 0px 100px grey; } nav ul { margin-right: 30px; margin-top: 25px; } nav li { display: inline-block; font-size: 1.55rem; margin-right: 20px; font-family: 'Rajdhani'; color: rgba(102,102,102,0.75); } nav li a:hover { cursor: pointer; color: #1a1a1a; transition: all 0.7s ease; } .after:after { position: relative; left: 12px; top: 2px; display: inline-block; content: ""; width: 1px; height: 20px; background-color: rgba(102,102,102,0.25); } .logo { color: red; font-size: 3.7rem; margin: 10px; opacity: 1; margin-left: 30px; } /*---ABOUT---*/ .history h2 { font-family: 'Rajdhani'; color: rgba(102,102,102, 0.85); font-size: 3rem; text-align: center; margin-top: 20px; margin-bottom: 20px; } .history h2:after { content: ''; width: 18px; height: 2px; background-color: red; display: inline-block; margin-left: 5px; margin-bottom: 13px; } .history h2:before { content: ''; width: 18px; height: 2px; background-color: red; display: inline-block; margin-right: 5px; margin-bottom: 13px; } .history p { color: rgba(102,102,102, 0.85); font-family: 'Rajdhani'; font-size: 1.7rem; text-align: center; width: 90%; margin-right: auto; margin-left: auto; margin-top: 35px; position: relative; top: -20px; } /*---SERVICES---*/ .services { background: blue; background-size: cover; background-attachment: fixed; } .services .wrapper { width: 100%; height: 250px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.3); } .services { color: white; font-family: 'Arvo'; font-size: 3rem; } .services .content { background-color: white; width: 100%; } .services h2 { font-family: 'Rajdhani'; color: rgba(102,102,102, 0.85); font-size: 3rem; text-align: center; margin-top: 0px; margin-bottom: 20px; position: relative; top: 20px; } .services h2:after { content: ''; width: 18px; height: 2px; background-color: red; display: inline-block; margin-left: 5px; margin-bottom: 13px; } .services h2:before { content: ''; width: 18px; height: 2px; background-color: red; display: inline-block; margin-right: 5px; margin-bottom: 13px; } .services .list { display: flex; padding-bottom: -40px; } .services ul { color: red; font-size: 2rem; display: inline-block; font-family: 'Rajdhani'; list-style-type: square; margin-left: 80px; margin-top: 13px; flex-basis: 33.33%; margin-bottom: 0px; } .services p { margin: 0; } /*---TESTIMONY---*/ .testimony { background: blue; display: flex; justify-content: space-around; background-attachment: fixed; } .testimony h1 { margin-bottom: 20px; margin-top: 20px; color: white; font-family: 'Arvo'; padding: 30px; display: inline-block; flex-basis: 40%; margin-left: 30px; } .testimony span { color: white; font-size: 2.3rem; } .testimony .quote { font-family: 'Rajdhani'; font-size: 1.2rem; margin-left: 40px; } .testimony .left-quote { position: relative; left: 50px; top: 30px } .fa-quote-right { position: relative; right: 35px; top: 30px; } .testimony .move { right: 68px; } /*---FOOTER---*/ .footer .wrapper { display: flex; } .footer div { display: inline-block; flex-basis: 33.33%; font-family: 'Rajdhani'; color: rgba(102,102,102, 1); margin-top: 5px; } .footer h1 { font-size: 2rem; margin-top: 15px; } .footer .inner { margin-left: 70px; } .footer .inner:before { display: inline-block; content: ''; width: 360px; height: 2px; background-color: rgba(102,102,102, 0.6); position: absolute; margin-top: 54px; } .links .inner:after { content: ''; width: 140px; height: 2px; background-color: red; position: absolute; margin-top: -151px; } .social .inner:after { content: ''; width: 77px; height: 2px; background-color: red; position: absolute; margin-top: -171px; } .contact .inner:after { content: ''; width: 100px; height: 2px; background-color: red; position: absolute; margin-top: -174.5px; } .wrap:before { content: ''; width: 100px; height: 2px; background-color: red; position: absolute; margin-top: 55px; } .links a { display: block; text-decoration-line: none; color: rgba(102,102,102, 1); font-size: 1.2rem; position: relative; top: -10px; transition: color 0.4s ease; } .links a:hover { color: red; } .contact p { position: relative; top: -10px; } .social i { font-size: 1.7rem; margin-right: 5px; position: relative; top: -20px; color: rgba(102,102,102, 0.7); transition: all 0.4s ease; } .social i:hover { color: red; cursor: pointer; } #msg { margin-top: -15px; } .footer-textarea { background-color: rgba(102,102,102, 0.2); outline: none; color: rgba(102,102,102, 1); resize: none; } button { position: absolute; margin-left: 300px; margin-top: -50px; border: none; font-family: 'Rajdhani'; font-size: 1.2rem; transition: all ease 0.4s; outline: none; } button:hover { cursor: pointer; color: red; } .dark { color: red; } .copyright { position: absolute; background-color: white; text-align: center; width: 100%; margin-bottom: 0; font-size: 1.2rem; padding-bottom: 4px; } /*-------MEDIA QUERIES-------*/ @media screen and (max-width: 425px) { /*---NAV---*/ .logo { font-size: 3rem; margin-left: 10px; } ul { margin: 0; padding: 0; } nav li { display: none; } .ham-menu { width: 75px; height: 75px; position: fixed; right: 0; top: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; } .m1, .m2, .m3 { border-radius: 4px; margin: 5px; width: 45px; height: 5px; background-color: red; float: left; } /*---FOOTER---*/ .footer .wrapper { display: flex; flex-direction: column; } .footer div { margin: 0; } .footer h1 { font-size: 2rem; margin-top: 10px; } .footer .inner { margin: 0; } .footer .inner:before { display: inline-block; content: ''; width: 90%; height: 2px; background-color: rgba(102,102,102, 0.6); position: absolute; margin-top: 48px; } .links .inner:after { width: 33%; margin-top: -152px; } .social .inner { position: relative; top: -10px; } .social .inner:after { content: ''; width: 18%; height: 2px; background-color: red; position: absolute; left: 0; margin-top: -43.75px; } .contact .inner:after { content: ''; width: 24%; height: 2px; background-color: red; position: absolute; margin-top: -148px; } .links a { margin-left: 5px; } .social h1 { margin-bottom: 10px; } #msg { font-size: 1.3rem; margin-bottom: 0; float: right; margin-right: 25.5%; position: relative; top: 15px; } .footer button { right: 9.25%; margin-top: 0.2px; } .social i { font-size: 1.8rem; margin-right: 7px; position: relative; top: -5px; left: 5px; color: rgba(102,102,102, 0.7); transition: all 0.4s ease; } .footer-textarea { width: 88.5%; margin-left: 5px; } .contact p { margin: 5px; font-size: 1.2rem; } .copyright { background-color: red; } .copyright span { color: white; background-color: red; } } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>About | Kane Concrete & Construction</title> <link rel="stylesheet" href="../css/about.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="wrapper2"> <nav> <div class="logo"> <i class="fab fa-accusoft"></i> </div> <div class="nav"> <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="#services">Services</a></li> <li class="after"><a href="careers.html">Careers</a></li> <li class="after"><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <h1>About Us</h1> </div> </header> <section class="history" style="background-color: white;"> <h2>Our History</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea magni suscipit modi sapiente. Perferendis odit, incidunt, amet adipisci, quaerat aperiam, impedit nemo excepturi culpa quis libero nostrum molestiae error eveniet ipsa repellat? Cum quae laudantium totam neque provident fuga rerum quasi dolorum vel obcaecati quidem perspiciatis iure maiores dignissimos, recusandae enim error libero nobis inventore quo adipisci perferendis. Pariatur.</p> </section> <section class="services" id="services"> <div class="wrapper"> <h1>Services</h1> </div> <div class="content"> <h2>Our skills</h2> <div class="list"> <ul class="skills" style="position: relative; top: -45px;"> <li><p style="color: rgba(102,102,102, 0.85);">Flatwork Concrete</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Paving</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Driveways</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Sidewalks</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Slab Repair</p></li> </ul> <ul class="skills"> <li><p style="color: rgba(102,102,102, 0.85);">Foundations</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Flooring</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Seismic Retrofit</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Other Concrete Concerns</p></li> </ul> <ul class="skills" style="position: relative; top: -45px;"> <li><p style="color: rgba(102,102,102, 0.85);">Commercial</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Residential</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Decks and Patios</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Kitchen Flooring</p></li> <li><p style="color: rgba(102,102,102, 0.85);">Curb Repair</p></li> </ul> </div> </div> </section> <section class="testimony"> <span><i class="fas fa-quote-left left-quote"></i></span><h1>Most companys that I searched charged way too much, until I found Kane. They were fast, cheap, and very professional. I'm happy I chose them and will definitely keep them in mind for any other of my future projects.<span class="quote">-Some Person</span></h1><span><i class="fas fa-quote-right move"></i></span> <span><i class="fas fa-quote-left left-quote"></i></span><h1>I was very impressed with their work. They were cost effective and efficient and overall a good team. Saw a lot of synergy with their organization and others they worked with. They definitely know what they're doing.<span class="quote">-Some Person</span></h1><span><i class="fas fa-quote-right"></i></span> </section> <section class="footer"> <div class="wrapper"> <div class="links"> <div class="inner"> <h1>Quick Links</h1> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Job Openings</a> <a href="#">Gallery</a> </div> </div> <div class="social"> <div class="inner"> <h1>Social</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> <p id="msg">Give us some feedback!</p> <button name="msg">Send</button> <textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea> </div> </div> <div class="contact"> <div class="inner" class="wrap"> <h1>Contact</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>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div> </section> </body> </html> 

我正在為導航部分和頁腳部分編寫媒體查詢。 我從首頁開始執行此操作，然后將媒體查詢復制並粘貼到“關於”頁面，因為它具有相同的導航和頁腳，但在chrome瀏覽器中無法使用媒體查詢。 它僅適用於主頁嗎？ 此處發布的代碼將顯示其工作原理，但圖片顯示了在我的chrome瀏覽器中的外觀。 鉻

Answer 1

您是否忘記將以下內容添加到head標簽中？

<meta content="width=device-width, initial-scale=1" name="viewport" />