有人能告诉我为什么这个 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% 并定位在页面顶部。