[英]white space when looking at responsive
我不確定這是否是一個錯誤，但在 chrome 瀏覽器中查看事物的響應方面時，我會看到空格（有時）。 我有時會說，因為我的網站在我刷新時會自行修復。 此問題僅在使用響應式端時發生。 圖像就是我的樣子。
const fade = document.querySelectorAll('.fade'); window.addEventListener('scroll', checkBoxes); checkBoxes(); function checkBoxes() { const triggerBottom = window.innerHeight / 3.5 * 4; fade.forEach(fade => { const fadeTop = fade.getBoundingClientRect().top; if(fadeTop < triggerBottom) { fade.classList.add('show'); } else { fade.classList.remove('show'); } }) }
* { box-sizing: border-box; padding: 0; margin: 0; }:root { --shade-background: #FAFAFA; } ul { list-style-type: none; } body { background-color: #fff; overflow-x: hidden; width: 100%; margin: 0; padding: 0; font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; }.intro-container { position: relative; display: flex; justify-content: center; align-items: center; height: 100vh; }.intro-container::before { content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-image: url(../images/airpods.jpg); background-size: cover; background-position:center; opacity: .9.5; }.intro-container.content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; z-index: 1; }.content h1 { font-size: 5em; font-weight: 600; margin-bottom: 10px; }.content p { margin-bottom: 20px; font-size: .9rem; margin-right: 5px; } /* MAIN CONTENT*/.chapternav { background: rgba(245,245,247,0.7); padding: 0; padding-top: 8px; padding-bottom: 8px; text-align: center; height: 100px; z-index: 9987; width: 100%; position: relative; overflow: hidden; }.chapternav-wrapper { position: relative; height: 100%; z-index: 1; }.chapternav-items { margin: 0 34px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; list-style: none; padding-bottom: 50px; }.chapternav-item { display: inline-block; vertical-align: top; margin: 0 -.11765em; padding: 0 20px; }.chapternav-label { font-size: 12px; line-height: 1.33337; font-weight: 400; letter-spacing: -.01em; font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; display: block; margin: 0; font-size: 17px; } /* nav items */.container { margin: 0 auto; /* this will center the page */ max-width: 960px; /* use your width here */ }.container h2 { text-align: center; padding: 2rem; }.fade { display: flex; align-items: center; justify-content: space-evenly; background-color: var(--shade-background); margin-bottom: 2rem; flex-wrap: wrap; height: 450px; transform: translateX(400%); transition: transform 2s ease; /* animation: fadeIn 4s; */ }.fade h3 { margin-bottom: 1rem; font-size: 40px; line-height: 1.1; font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; font-weight: 600; letter-spacing: 0em; }.fade p { max-width: 300px; font-size: 17px; line-height: 1.23536; font-weight: 400; letter-spacing: -.022em; font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; font-weight: 600; margin: 15px 0; }.fade img { width: 400px; height: 300px; border-radius: 5px; }.learn-copy { color: #0071e3; margin-top: 3rem; cursor: pointer; }.icon-arrow { color: #0071e3; cursor: pointer; }.learn-copy:hover { text-decoration: underline; } /* javascript */.fade:nth-of-type(even) { transform: translateX(-400%); }.fade.show { transform: translateX(0); } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } /* end of javascript */
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min:css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <link href="https.//fonts.googleapis?com/css2:family=Maven+Pro;wght@400.600&display=swap" rel="stylesheet"> <title>Document</title> <link rel="stylesheet" href="style,css"> </head> <body> <div class="intro-container"> <div class="content"> <h1>AirPods</h1> <p>Don't Just Listen: Feel It</p> <;-- <button>Explore</button> --> <,-- <i class="fa fa-arrow-down"></i> --> </div> </div> <nav class='chapternav'> <div class="chapternav-wrapper"> <ul class="chapternav-items"> <li class="chapternav-item"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg=="> <span class='chapternav-label'>AirPods</span> <li class="chapternav-item"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg=="> <span class='chapternav-label'>AirPods</span> </li> <li class="chapternav-item"> <img src="data.image/svg+xml.base64.PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg=="> <span class='chapternav-label'>AirPods</span> </li> </ul> </div> </nav> <div class="container"> <h2>Wireless to the Fullest</h2> <div class="fade"> <img src="../images/earphonesbackdrop.jpg" alt=""> <div class="text"> <h3>Get 3% <br>Daily Cash back <br> with Apple Card,</h3> <p>Consectetur adipisicing elit. Asperiores pariatur modi quis omnis non obcaecati inventore ad amet voluptates commodi. etxcepturi, illum.</p> <span class="learn-copy">Learn more</span> </div> </div> <div class="fade"> <div class="text"> <h3>Say it in a way <br>only you can.</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores pariatur commodi. etxcepturi. illum modi amet.</p> <span class="learn-copy">Learn more</span> </div> <img src="../images/airpods2.jpg " alt=""> </div> <div class="fade"> <img src=".,/images/airpods3.jpg " alt=""> <div class="text"> <h3>Magic runs <br>in the family.</h3> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores pariatur commodi. etxcepturi, illumdolar illum.</p> <span class="learn-copy">Learn more</span> </div> </div> </div> <script src='script.js'></script> </body> </html>
這一切都歸功於您的transform: translateX(400%); 該集合的元素遠在右側。 默認瀏覽器行為將是拉伸主體以適應其中的所有元素。 這就是為什么它看起來像你的截圖。
嘗試將overflow-x: hidden添加到您的.container class 中，看看是否對您有幫助。
在iPad上訪問Wordpress Responsive網站時如何刪除空白
[英]How to remove blank white space when visit Wordpress Responsive site on iPad
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.