有人能告訴我為什么這個 css 代碼不能正常工作嗎？

Question

這是JSfiddle完整代碼鏈接：

代碼

我的時鍾代碼 output

 * { padding: 0; margin: 0; box-sizing: border-box; } body { background: #0b172a; font-family: sans-serif; } #container { height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 5rem; color: white; text-transform: uppercase; }.clock-ctr { position: relative; border: 2px solid white; height: 80vh; width: 80vw; padding: 10px; display: flex; justify-content: center; align-items: center; }.hour-ctr { grid-area: hour; }.min-ctr { grid-area: min; }.sec-ctr { grid-area: sec; }.ampm { grid-area: ampm; background: #bc4123; }.time-ctr { position: absolute; height: 70%; width: 90%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: 10px; grid-template-areas: "hour min sec" "ampm ampm ampm"; } h1 { margin-bottom: 1rem; letter-spacing: 8px; font-size: 2.5rem; }.time-box { background: #bc4123; border-radius: 10px; display: grid; justify-items: center; align-items: center; height: auto; text-align: center; font-weight: bold; font-size: 28px; }

 <div id="container"> <h1 class="clock-title">Clock</h1> <div class="clock-ctr"> <div class="time-ctr"> <div class="hour-ctr time-box"> <p class="hour-value">00</p> <p class="hour-title">Hour</p> </div> <div class="min-ctr time-box"> <p class="min-value">00</p> <p class="min-title">Minute</p> </div> <div class="sec-ctr time-box"> <p class="sec-value">00</p> <p class="sec-title">Second</p> </div> <p class="ampm time-box">AM</p> </div> </div> </div>

誰能告訴我如何改進這段代碼

我試圖使它完全響應，但它並沒有起作用，我厭倦了使用 flex 使元素出現在頁面中心。 然后我使用網格來創建時鍾布局，但我不知道如何對齊單元格，所以我在其中再次使用了網格。 我正在使用 rem 和 em 來制作響應式代碼，但效果不佳。 請查看我的代碼。

Answer 1

這是因為time-box div 的font-size沒有響應（28px 無論設備大小如何），為了使其響應，我添加了media queries以根據設備寬度更改字體，如本例所示：

 * { padding: 0; margin: 0; box-sizing: border-box; } body { background: #0b172a; font-family: sans-serif; } #container { height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 5rem; color: white; text-transform: uppercase; }.clock-ctr { position: relative; border: 2px solid white; height: 80vh; width: 80vw; padding: 10px; display: flex; justify-content: center; align-items: center; }.hour-ctr { grid-area: hour; }.min-ctr { grid-area: min; }.sec-ctr { grid-area: sec; }.ampm { grid-area: ampm; background: #bc4123; }.time-ctr { position: absolute; height: 70%; width: 90%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: 10px; grid-template-areas: "hour min sec" "ampm ampm ampm"; } h1 { margin-bottom: 1rem; letter-spacing: 8px; font-size: 2.5rem; }.time-box { background: #bc4123; border-radius: 10px; display: grid; justify-items: center; align-items: center; height: auto; text-align: center; font-weight: bold; } @media (min-width:768px) {.time-box { font-size: 18px; } } @media (min-width:1024px) {.time-box { font-size: 22px; } } @media (min-width:1280px) {.time-box { font-size: 28px; } }

 <div id="container"> <h1 class="clock-title">Clock</h1> <div class="clock-ctr"> <div class="time-ctr"> <div class="hour-ctr time-box"> <p class="hour-value">00</p> <p class="hour-title">Hour</p> </div> <div class="min-ctr time-box"> <p class="min-value">00</p> <p class="min-title">Minute</p> </div> <div class="sec-ctr time-box"> <p class="sec-value">00</p> <p class="sec-title">Second</p> </div> <p class="ampm time-box">AM</p> </div> </div> </div>

---

您也可以使用calc() function，因此您可以像這樣計算相對於屏幕寬度的字體大小：

 * { padding: 0; margin: 0; box-sizing: border-box; } body { background: #0b172a; font-family: sans-serif; } #container { height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 5rem; color: white; text-transform: uppercase; }.clock-ctr { position: relative; border: 2px solid white; height: 80vh; width: 80vw; padding: 10px; display: flex; justify-content: center; align-items: center; }.hour-ctr { grid-area: hour; }.min-ctr { grid-area: min; }.sec-ctr { grid-area: sec; }.ampm { grid-area: ampm; background: #bc4123; }.time-ctr { position: absolute; height: 70%; width: 90%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; gap: 10px; grid-template-areas: "hour min sec" "ampm ampm ampm"; } h1 { margin-bottom: 1rem; letter-spacing: 8px; font-size: 2.5rem; }.time-box { background: #bc4123; border-radius: 10px; display: grid; justify-items: center; align-items: center; height: auto; text-align: center; font-weight: bold; font-size: calc(18px + 0.390625vw); }

 <div id="container"> <h1 class="clock-title">Clock</h1> <div class="clock-ctr"> <div class="time-ctr"> <div class="hour-ctr time-box"> <p class="hour-value">00</p> <p class="hour-title">Hour</p> </div> <div class="min-ctr time-box"> <p class="min-value">00</p> <p class="min-title">Minute</p> </div> <div class="sec-ctr time-box"> <p class="sec-value">00</p> <p class="sec-title">Second</p> </div> <p class="ampm time-box">AM</p> </div> </div> </div>

Answer 2

Stack Overflow 問題中 CSS 代碼的問題是 #nav 元素的左右值設置為 0。這會導致該元素占據其父元素的整個寬度，這可能不是預期的行為.

要解決此問題，您可以嘗試將左右值設置為自動，如下所示：

#nav {
  position: fixed;
  top: 0;
  left: auto;
  right: auto;
  width: 100%;
  height: 60px;
  background-color: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

通過此更改，#nav 元素將不再占據其父元素的整個寬度，而是將其寬度設置為 100% 並定位在頁面頂部。