Question

我在带有此CSS的名为#clock的标记内部有一些HTML代码：

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

宽度是480px但是我想如果我将它改为100％它会随屏幕宽度调整大小但是这不起作用。

我在这里用完整的例子创造了一个小提琴，我做错了什么？我怎样才能使这个响应适应所有屏幕，因为我迷失了？

here

提前谢谢

Answer 1

摆脱所有定位 - 你在这里不需要它。使用边距代替，以便在更改视口时移动内容（如果需要）。 <div>默认为100％宽。您也可以查看此Guide to Flexbox。好吧，因为我们只知道你希望它全部响应并适合视口，请查看：

#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>

Answer 2

我不完全确定您正在寻找的最终结果。但是，至少应该将flex: 1;添加到.time类。

您当前的css并未指定每个弹性儿童应占用多少空间。他们最终堆叠在左边。

Answer 3

设置基于百分比的宽度会使宽度相对于父元素。此父元素需要具有自定义的宽度。直接父级可以具有相对宽度，但是在层次结构中的某个点处，您需要固定宽度。不幸的是，默认情况下<body>和<html>都不会采用固定的width。

考虑到您的#clock位于<body>正下方，您可以将{strong> viewport-sized typography 与width: 100vw一起使用，以表明#clock元素应该占据视口宽度的100%。

请注意，如果您正在使用完整视口，那么您还希望使用margin: 8px覆盖<body>上的默认margin: 0：< / p>

body {
  margin: 0;
}

#clock {
  width: 100vw;
}

这可以在以下示例中看到：

＆＃13;

body {
  margin: 0;
}

#clock,
.time {
  position: relative;
  display: flex;
  flex-direction: row;
}

#clock {
  width: 100vw;
  top: 25%;
  margin: 0 auto 36px auto;
}

.time.minutes {
  left: 32px;
}

.time.seconds {
  left: 64px;
}

.column {
  top: 0;
}

.display {
  position: absolute;
  bottom: -36px;
  left: 35px;
  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%;
  }
}

＆＃13;

<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>

＆＃13;

希望这有帮助！：）

Answer 4

只需更改CSS

即可

#clock {
  position: relative;
  display: flex;
  flex-direction: row;
  top: 25%;
  margin: 0 auto 36px auto;
}
.time {
    display: flex;
    width: 100%;
}

小提琴 - https://jsfiddle.net/Jim_Miraidev/axtdswb1/1/

宽度100％后HTML无响应

4 个答案: