為什么此媒體查詢僅適用於 max-width=1000px？
[英]Why this media query only working with max-width=1000px?
問題描述
在下面的代碼中，當屏幕大小的最大寬度為 1000px 時，我試圖更改在 nav 元素（類名：flex-nav）中定義的一組導航鏈接的 flex 功能，這是可行的。 但是當我將最大寬度減小到 900px 左右時，導航欄沒有任何變化。
另外，當屏幕寬度減小到 500px 時，nav 元素的 flex 特性再次改變，並應用更多的 CSS 來改變包裝容器的 flex 項目的順序（包裝是包含所有元素的 div 容器的類名） html 標簽），但看不到任何變化。 請幫我解決這個問題。
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-family: sans-serif; margin: 0; background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%); } a { color: white; font-weight: 100; letter-spacing: 2px; text-decoration: none; background: rgba(0, 0, 0, 0.2); padding: 20px 5px; display: inline-block; width: 100%; text-align: center; transition: all 0.5s; } a:hover { background: rgba(0, 0, 0, 0.3); } .toggleNav { display: none; } img { width: 100%; } .wrapper { max-width: 100%; margin: 0 auto; } input { padding: 10px; border: 0; } section, footer { text-align: center; background: rgba(0, 0, 0, 0.2); padding: 20px; margin: 20px 0; color: white; font-weight: 100; } /* Flex Container */ .flex-nav ul { border: 1px solid black; list-style: none; margin: 0; padding: 0; display: flex; } /* Flex Item */ .flex-nav li { flex: 3; } .flex-nav .social { flex: 1; } @media all and (max-width:1000px) { .flex-nav ul { flex-wrap: wrap; } .flex-nav li { flex: 1 1 50%; } .flex-nav .social { flex: 1 1 25%; } } @media all and (max-width:500px) { .flex-nav li { flex-basis: 100%; } /* Turn on flexbox */ .wrapper { display: flex; flex-direction: column; } /* Reorder items */ .wrapper>* { order: 999; } /* Nav */ .flex-nav { order: 1; } .toggleNav { display: block; } .flex-nav ul { display: none; } .flex-nav ul.open { display: flex; } /* Header */ .top { order: 2; } /* Details */ .details { order: 3; } /* Sign Up */ .signup { order: 4; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FlexBox Nav</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <header class="top"> <h1><a href="#">What The Flexbox?!</a></h1> </header> <nav class="flex-nav"> <a href="#" class="toggleNav">☰ Menu</a> <ul> <li><a href="#">Item 01</a></li> <li><a href="#">Item 02</a></li> <li><a href="#">Item 03</a></li> <li><a href="#">Item 04</a></li> <li><a href="#">Item 05</a></li> <li><a href="#">Item 06</a></li> <li class="social"> <a href="http://twitter.com/wesbos"><i class="fa fa-twitter"></i></a> </li> <li class="social"> <a href="http://facebook.com/wesbos.developer"><i class="fa fa-facebook"></i></a> </li> <li class="social"> <a href="http://github.com/wesbos"><i class="fa fa-github"></i></a> </li> <li class="social"> <a href="http://instagram.com/wesbos"><i class="fa fa-instagram"></i></a> </li> </ul> </nav> <section class="hero"> <img src="http://lorempixel.com/1000/600/abstract"> </section> <section class="details"> <p>A simple video course to help you master FlexBox.</p> <p>Sign up today to grab all the videos and exercises!</p> </section> <section class="signup"> <form action="" class="signup"> <input type="text" placeholder="Your Name"> <input type="email" placeholder="Email Address"> <input type="submit" value="Sign me up!"> </form> </section> <footer> <p>© Crugar</p> </footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function() { $('.toggleNav').on('click', function() { $('.flex-nav ul').toggleClass('open'); }); }); </script> </body> </html>
先感謝您。
1 個解決方案
解決方案1
1 2021-07-10 15:38:58
我不確定你在找什么，但我從上面的上下文中可以理解的是，嘗試使用 @media only screen and (max-width: 1000px) 和 @media only screen and (max-width: 500px) 而不是@media all and (max-width:1000px) and @media all and (max-width:500px)。 這可能會解決您的問題...
如何將img和輪播彼此對齊，最大寬度為1000px？
[英]How to align an img and a carousel next to each other, with max-width of 1000px?
當移動設備小於 1000px 時，強制 CSS 應用 1000px 的媒體查詢
[英]Force CSS to apply media query for 1000px when the mobile device is less than 1000px
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.