需要帮助使其响应 - CSS/HTML/JS
[英]Need Help making this responsive - CSS/HTML/JS
问题描述
I have been trying to make this countdown timer responsive for mobile and smaller devices responses and am struggling.
我一直在尝试使这个倒数计时器响应移动和较小设备的响应并且正在努力。 Ideally, I want the distance between the flex attribute to shrink as the screen gets smaller allowing the countdown to come closer to one another so that it fits on the screen at any size.理想情况下，我希望 flex 属性之间的距离随着屏幕变小而缩小，允许倒计时彼此靠近，以便它适合任何尺寸的屏幕。 However, I do not know how to do so.但是，我不知道该怎么做。 So I attempted to put 'flex-direction: column' in the @media section but nothing happened.所以我试图将“flex-direction: column”放在@media 部分，但什么也没发生。 I also tried to reduce the size of the countdown timers as the screen got smaller but that did not help either.随着屏幕变小，我还尝试减小倒数计时器的大小，但这也无济于事。
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
If you want the distance between the boxes to reduce, then change the "margin" sizes for each screen size.如果您希望缩小框之间的距离，请更改每个屏幕尺寸的“边距”尺寸。 For example, for the smallest screen, change your margin to this:例如，对于最小的屏幕，将边距更改为：
margin: 0 1rem 1rem 1rem; /*these by order are: top distance | right | bottom | left */
Distance between blocks is pretty much always based on padding and margins of those elements (padding is inner distance between element's content and the border of the element, while margins are representing distance between the border of the element and outside (other) elements), so always fiddle with them first.块之间的距离几乎总是基于这些元素的填充和边距（填充是元素内容和元素边框之间的内部距离，而边距表示元素边框和外部（其他）元素之间的距离），所以总是先摆弄他们。
Also, don't forget to add the ".countdown div::after" for each of those screen sizes, since your text "Days/hours/etc" will be cramped up all together.另外，不要忘记为每个屏幕尺寸添加“.countdown div::after”，因为您的文本“天/小时/等”将被挤在一起。 So change the font size to 1.2rem in the smallest screen size for this example.因此，在此示例中，将最小屏幕尺寸中的字体大小更改为 1.2rem。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.