媒体查询不适用于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> 

I'm writing the media queries for the nav section and the footer section. I did this starting on the home page and then copied and pasted the media query to the about page because it has the same nav and footer except the media query isn't working in my chrome browser. It only works on the home page? The code posted here will show it working but the pic shows how it looks in my chrome browser. chrome

Answer 1

您是否忘记将以下内容添加到head标签中？

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