addveventlistener無法處理768px以上的媒體查詢

Question

我已經嘗試過使用Firefox 49和chrome 63的網站，同樣的問題，如果我單擊每個卡夾[flip card]，它可以在使用chrome的iphone4，galaxy 5和iphone 8上運行，但是，經過幾次嘗試，如果我將方向從640px切換到320px，縱向視圖，頂部的翻轉卡將無法立即工作，相反，我必須等待長達30秒，然后才能工作..在768px以上，所有卡都無法工作....

 /** * Created by User1 on 16/01/2018. */ //NAV //dom query var btn3= document.getElementById('btn3'); var btn= document.getElementById('btn'); var nav=document.getElementById('nav_bar'); //FLIP CARD //dom query var card_holder=document.getElementsByClassName('card_holder'); var grid=document.getElementById('grid_container'); //array from card front Array.from(card_holder).forEach(function(holder){ holder.addEventListener('click',function(e){ holder.firstElementChild.classList.toggle('switch'); holder.lastElementChild.classList.toggle('switchB'); console.log(holder) }); }); //nav event btn.addEventListener('click',function(){ //toggle menu nav.classList.toggle('viewer'); }); //btnbb3.addEventListener('click',function(){ //alert('hiya'); //grid.innerHTML+= '<p>hello</p>'; //}); //array from flip container //Array.from(flipContainer).forEach(function(addContainer) {}); 

 /* ===============Mobile Layout ================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } img, embed, object, video { max-width: 100%; } .ie6{ width: 100%; } /* ============================================================ BODY ============================================================ */ body{ margin: 0; padding: 0; } #grid_container{ margin: 0; padding: 0; font-size: 18px; } /* ============================================================ HEADER ============================================================ */ header{ background-color: #ff3599; font-size: 36px; padding: 10px; color: whitesmoke; } /* ============================================================ NAVIGATION ============================================================ */ #nav_bar{ width: 100%; height: 100%; opacity: 0; position: absolute; z-index: 3; } #nav_bar.viewer{ background-color: #1c2c74; opacity: 0.7; } #nav_bar a{ color: whitesmoke; display: block; text-align: center; text-decoration: none; padding: 10px; font-size: 36px; } #nav_bar a:hover{ color: #ff3599; } /* ============================================================ ADVERT ANIMATION ============================================================ */ @keyframes im { 0%{ position: absolute; left: -100%; } 25%{ position: absolute; left: -75%; } 50%{ position: absolute; left: -50%; } 75%{ position: absolute; left: -25%; } 100%{ position: absolute; left: 0; } } @keyframes im { 0%{ position: absolute; left: -100%; } 25%{ position: absolute; left: -75%; } 50%{ position: absolute; left: -50%; } 75%{ position: absolute; left: -25%; } 100%{ position: absolute; left: 0; } } /* ============================================================ ADVERT ============================================================ */ .advert{ display: block; height: 350px; padding: 10px; background-color: #77a7c7; } .advert img{ height: inherit; } #img3{ width: 100%; animation-name: im3; animation-delay: 30s; animation-timing-function: ease; animation-duration: 30s; } #img1{ width: 100%; display: none; animation-name: im1; animation-timing-function: ease; animation-duration: 30s; } /* ============================================================ FLIP ============================================================ */ .flip_container{ display: flex; flex-direction: column; justify-content: space-around; padding: 10px; } .card_holder{ display: block; width: 300px; height: 400px; margin-bottom: 10px; } .card_front{ backface-visibility: hidden; background-color: #ff3599; width: inherit; height: inherit; position: absolute; transform: rotateY(0deg); } .card_back{ position: absolute; backface-visibility: hidden; background-color: #1c2c74; opacity: 0.7; width: inherit; height: inherit; transform: rotateY(-180deg); } .card_holder span{ text-align: center; display: inline-block; padding-top: 50%; color: whitesmoke; } .card_front.switch{ transform: rotateY(-180deg); } .card_back.switchB{ transform: rotateY(0deg); } /* ============================================================ INFO ============================================================ */ .info h2{ padding: 10px; background-color: #77a7c7; color: #f5f5f5; font-weight: 800; border-bottom: 1px solid whitesmoke; } .info p{ padding: 10px; background-color: #77a7c7; color: #f5f5f5; } /* ============================================================ FOOTER ============================================================ */ @media only screen and (min-width:360px){ .card_holder{ width: 340px; } } @media only screen and (min-width:480px){ .card_holder{ width: 460px; } } @media only screen and (min-width:640px){ .flip_container{ flex-direction: row; } .card_holder{ width: 200px; } } @media only screen and (min-width:768px){ .card_holder{ width: 240px; } } @media only screen and (min-width:1024px) { .card_holder{ width: 324px; } } @media only screen and (min-width:1280px){ .card_holder{ width: 410px; } } @media only screen and (min-width:1440px){ .card_holder{ width: 460px; } #grid_container{ background-color: #000011; } } 

 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/flip.css"/> <title></title> </head> <body> <!--grid container--> <div id="grid_container"> <!--header--> <header> <p id="btn">HHH</p> NSA.......... </header> <!--navigation--> <nav id="nav_bar"> <a>Home</a> <a>About us</a> <a>News</a> </nav> <!--advert container--> <div class="advert"> <img id="img1" src="images/2.jpg" alt=""/> <img id="img3" src="images/3.jpg" alt=""/> </div> <!--flip container--> <div class="flip_container" id="flipCon"> <div class="card_holder"> <div class="card_front"><span>CARD 1 Front</span></div> <div class="card_back"><span>CARD 1 Back</span></div> </div> <div class="card_holder"> <div class="card_front"><span>CARD 2 Front</span></div> <div class="card_back"><span>CARD 2 Back</span></div> </div> <div class="card_holder" > <div class="card_front"><span>CARD 3 Front</span></div> <div class="card_back"><span>CARD 3 Back</span></div> </div> </div> <div class="info"> <h2>Heading</h2> <p> Aenean nec sollicitudin dolor. Praesent interdum accumsan odio, ut tristique lorem auctor sed. Vivamus dictum arcu venenatis ipsum pellentesque fringilla. Mauris rhoncus felis a rhoncus tristique. Etiam pretium convallis pretium. Donec feugiat ligula lorem, sed vestibulum leo rhoncus nec. Aliquam vehicula convallis leo ut ultricies. Cras vel justo sit amet risus cursus commodo in a nunc. Sed interdum consectetur nisl id ultricies. Nullam sit amet mi in massa facilisis maximus. </p> </div> <div class="info"> <h2>Heading</h2> <p> Aenean nec sollicitudin dolor. Praesent interdum accumsan odio, ut tristique lorem auctor sed. Vivamus dictum arcu venenatis ipsum pellentesque fringilla. Mauris rhoncus felis a rhoncus tristique. Etiam pretium convallis pretium. Donec feugiat ligula lorem, sed vestibulum leo rhoncus nec. Aliquam vehicula convallis leo ut ultricies. Cras vel justo sit amet risus cursus commodo in a nunc. Sed interdum consectetur nisl id ultricies. Nullam sit amet mi in massa facilisis maximus. </p> </div> <div class="info"> <h2>Heading</h2> <p> Aenean nec sollicitudin dolor. Praesent interdum accumsan odio, ut tristique lorem auctor sed. Vivamus dictum arcu venenatis ipsum pellentesque fringilla. Mauris rhoncus felis a rhoncus tristique. Etiam pretium convallis pretium. Donec feugiat ligula lorem, sed vestibulum leo rhoncus nec. Aliquam vehicula convallis leo ut ultricies. Cras vel justo sit amet risus cursus commodo in a nunc. Sed interdum consectetur nisl id ultricies. Nullam sit amet mi in massa facilisis maximus. </p> </div> <!--footer--> <footer></footer> </div> </body> <script src="js/flip.js"></script> </html> 

Answer 1

。問題出在導航欄[#nav_bar]上，它的位置絕對是絕對的，並且高度設置為100％，z索引為3，當切換且不透明度為1時，我可以看到它覆蓋了翻轉卡的表面積，我將nav_bar的高度更改為50％，即70％，它仍會覆蓋翻頁卡的上半部分。 現在一切正常，動畫沒有引起任何問題，很多謝克斯·謝利都沒有找到解決問題的方向...