将宽度设置为 100% 后 HTML 没有响应

Question

我在一个名为 #clock 的标签中有一些 HTML 代码和这个 CSS:

#clock {
  width: 100%;
  top: 25%;
  margin: 0 auto 36px auto;
}

宽度是 480 像素，但我想如果我将它更改为 100%，它会随着屏幕宽度调整大小，但这不起作用。

我在这里用完整的例子创建了一个 fiddle ，我做错了什么？当我迷路时，我怎样才能让它响应以适应所有屏幕？

https://jsfiddle.net/axtdswb1/

提前谢谢你

Answer 1

去掉所有的定位——你在这里不需要它。请改用边距，以便在更改视口(viewport)时移动您的内容(如果需要)。 <div> s 默认为 100% 宽。你也可能想检查这个 Guide to Flexbox .好吧，因为我们只知道您希望所有内容都响应并适合视口(viewport)，请检查一下:

#clock, .time {
  display: flex;
}
#clock {
  margin: 0 auto 36px auto;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}
.time {
  flex: 1;
  justify-content: center;
}
.display {
  letter-spacing: 3.2rem;
}
.bit {
  width: 48px;
  height: 48px;
  margin: 8px;
  background: #f36f25;
  box-shadow: 0 0 16px #f36f25;
  transition: all .5s ease-out;
}
.bit.blank {
  background: black;
  box-shadow: none;
}
@media only screen
and (min-width: 320px)
and (max-device-width: 768px)
and (orientation: landscape)
{
  #clock {
    top: 15%;
  }
}

<div id="clock">
          <div class="time hours">
            <div class="column">
              <div class="bit blank"></div>
              <div class="bit blank"></div>
              <div class="bit h5"></div>
              <div class="bit h4"></div>
            </div>
            <div class="column">
              <div class="bit h3"></div>
              <div class="bit h2"></div>
              <div class="bit h1"></div>
              <div class="bit h0"></div>
            </div>
            <h2 class="display"></h2>
          </div>
          <div class="time minutes">
            <div class="column">
              <div class="bit blank"></div>
              <div class="bit m6"></div>
              <div class="bit m5"></div>
              <div class="bit m4"></div>
            </div>
            <div class="column">
              <div class="bit m3"></div>
              <div class="bit m2"></div>
              <div class="bit m1"></div>
              <div class="bit m0"></div>
            </div>
            <h2 class="display"></h2>
          </div>
          <div class="time seconds">
            <div class="column">
              <div class="bit blank"></div>
              <div class="bit s6"></div>
              <div class="bit s5"></div>
              <div class="bit s4"></div>
            </div>
            <div class="column">
              <div class="bit s3"></div>
              <div class="bit s2"></div>
              <div class="bit s1"></div>
              <div class="bit s0"></div>
            </div>
            <h2 class="display"></h2>
          </div>
        </div>