需要幫助使其響應 - 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.