需要帮助使其响应 - CSS/HTML/JS
[英]Need Help making this responsive - CSS/HTML/JS
问题描述
我一直在尝试使这个倒数计时器响应移动和较小设备的响应并且正在努力。 理想情况下，我希望 flex 属性之间的距离随着屏幕变小而缩小，允许倒计时彼此靠近，以便它适合任何尺寸的屏幕。 但是，我不知道该怎么做。 所以我试图将“flex-direction: column”放在@media 部分，但什么也没发生。 随着屏幕变小，我还尝试减小倒数计时器的大小，但这也无济于事。
const countdown = document.querySelector(".countdown"); const interval = setInterval(() => { const deadline = new Date(2021, 11, 15, 12, 00, 00); const current = new Date(); const diff = deadline - current; const days = Math.floor(diff / (1000 * 60 * 60 * 24)) + ""; const hours = Math.floor((diff / (1000 * 60 * 60)) % 24) + ""; const minutes = Math.floor((diff / (1000 * 60)) % 60) + ""; const seconds = Math.floor((diff / 1000) % 60) + ""; countdown.innerHTML = ` <div data-content="Days">${days.length === 1 ? `0${days}` : days}</div> <div data-content="Hours">${hours.length === 1 ? `0${hours}` : hours}</div> <div data-content="Minutes">${ minutes.length === 1 ? `0${minutes}` : minutes }</div> <div data-content="Seconds">${ seconds.length === 1 ? `0${seconds}` : seconds }</div> `; if (diff < 0) { clearInterval(interval); countdown.innerHTML = "<h1>Countdown is over!</h1>"; } document.querySelector(".reset").addEventListener("click", () => { clearInterval(interval); const divs = document.querySelectorAll(".countdown div"); divs.forEach((div) => { div.innerHTML = "00"; }); }); }, 1000);
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Baloo da 2", cursive; } html { font-size: 62.5%; } .countdown-wrapper { width: 100%; position: relative; top: 15%; text-align: center; color: #ddd; } .countdown-wrapper h1 { font-size: 8rem; font-weight: 400; text-transform: uppercase; margin-bottom: 8rem; text-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.5); } .countdown { display: flex; justify-content: center; } .countdown div { width: 13rem; height: 13rem; background: linear-gradient( to bottom, rgba(61, 58, 58, 0.9) 50%, rgba(99, 93, 93, 0.9) 0 ); margin: 0 4rem 12rem 4rem; font-size: 7rem; font-weight: 400; display: flex; justify-content: center; align-items: center; box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5); position: relative; } .countdown div::before { content: ""; position: absolute; width: 100%; height: 0.24rem; background-color: #17181b; } .countdown div::after { content: attr(data-content); font-size: 2.2rem; font-weight: 400; position: absolute; bottom: -6rem; } /*=============== Responsive Section ===============*/ /* For small devices */ @media screen and (min-width: 320px){ .countdown div { width: 8rem; height: 4rem; background: linear-gradient( to bottom, rgba(16, 15, 15, 0.9) 50%, rgba(57, 53, 53, 0.9) 0 ); margin: 0 4rem 12rem 4rem; font-size: 2.5rem; font-weight: 400; display: flex; justify-content: center; align-items: center; box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5); position: relative; } } /* For medium devices */ @media screen and (min-width: 576px){ .countdown div { width: 10rem; height: 10rem; background: linear-gradient( to bottom, rgba(61, 58, 58, 0.9) 50%, rgba(99, 93, 93, 0.9) 0 ); margin: 0 4rem 12rem 4rem; font-size: 5rem; font-weight: 400; display: flex; justify-content: center; align-items: center; box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5); position: relative; } } @media screen and (min-width: 767px){ .countdown div { width: 12rem; height: 12rem; background: linear-gradient( to bottom, rgba(61, 58, 58, 0.9) 50%, rgba(99, 93, 93, 0.9) 0 ); margin: 0 4rem 12rem 4rem; font-size: 7rem; font-weight: 400; display: flex; justify-content: center; align-items: center; box-shadow: 0 0.8rem 2.5rem rgba(0, 0, 0, 0.5); position: relative; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Countdown</title> <link rel="stylesheet" href="style.css" /> <link href="https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> </head> <body> <div class="container"> <div class="countdown-wrapper"> <h1>Coming Soon...</h1> <div class="countdown"></div> </div> </div> <p>countdown timer</p> <script src="script.js"></script> </body> </html>
1 个解决方案
解决方案1
0 2021-10-20 09:02:52
如果您希望缩小框之间的距离，请更改每个屏幕尺寸的“边距”尺寸。 例如，对于最小的屏幕，将边距更改为：
margin: 0 1rem 1rem 1rem; /*these by order are: top distance | right | bottom | left */
块之间的距离几乎总是基于这些元素的填充和边距（填充是元素内容和元素边框之间的内部距离，而边距表示元素边框和外部（其他）元素之间的距离），所以总是先摆弄他们。
另外，不要忘记为每个屏幕尺寸添加“.countdown div::after”，因为您的文本“天/小时/等”将被挤在一起。 因此，在此示例中，将最小屏幕尺寸中的字体大小更改为 1.2rem。
需要帮助来制作带有js的按钮，然后将其链接到函数和CSS代码
[英]Need help making button with js then linking it to a function and css code
需要帮助使我的HTML和CSS代码更有效地导航
[英]Need help making my HTML and CSS code for navigation effect more efficient
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.