HTML在宽度为100%后没有响应

我在一个名为

#clock

的标签中有一些HTML代码，带有以下CSS：

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

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

我在这里创建了一个完整的例子，我做错了什么？当我迷路时，如何使其响应速度适应所有屏幕

---

提前谢谢你

我不完全确定你想要的最终结果。然而，至少，您应该添加

flex:1到
.time
类

您当前的
css
没有指定每个flex子级应该占用多少空间。它们最终会堆叠到左侧。
设置基于百分比的宽度会使宽度相对于父元素。此父元素本身需要定义宽度。直接父对象可以具有相对宽度，但在层次结构中的某个点上，您需要固定宽度。不幸的是，默认情况下，
和
都没有固定的
宽度

考虑到您的
#clock
位于
的正下方，您可以使用宽度为100vw的来声明
#clock
元素应占据视口宽度的
100%

请记住，如果要使用完整视口，还需要使用
边距：0来覆盖
上的默认
边距：8px
：

body {
  margin: 0;
}

#clock {
  width: 100vw;
}

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


正文{
保证金：0；
}
#时钟，
.时间{
位置：相对位置；
显示器：flex；
弯曲方向：行；
}
#钟{
宽度：100vw；
最高：25%；
保证金：0自动36px自动；
}
.时间.分钟{
左：32px；
}
.时间.秒{
左：64px；
}
.栏目{
排名：0；
}
.展示{
位置：绝对位置；
底部：-36px；
左：35px；
字母间距：3.2rem；
}
.比特{
宽度：48px；
高度：48px；
利润率：8px；
背景：#f36f25；
盒影：0 0 16px#f36f25；
过渡：全部。5秒放松；
}
.bit.blank{
背景：黑色；
盒影：无；
}
@仅介质屏幕和（最小宽度：320px）和（最大设备宽度：768px）和（方向：横向）{
#钟{
最高：15%；
}
}

只需更改CSS即可

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

小提琴-
摆脱所有的定位-你在这里不需要它。在更改视口时使用边距移动内容（如果需要）<代码>
s默认为100%宽。您可能还想检查一下这个。好吧，因为我们只知道您希望所有内容都能响应并适合视口，请查看以下内容：


#时钟、.time{
显示器：flex；
}
#钟{
保证金：0自动36px自动；
柔性包装：包装；
证明内容：周围的空间；
对齐内容：居中对齐；
}
.时间{
弹性：1；
证明内容：中心；
}
.展示{
字母间距：3.2rem；
}
.比特{
宽度：48px；
高度：48px；
利润率：8px；
背景：#f36f25；
盒影：0 0 16px#f36f25；
过渡：全部。5秒放松；
}
.bit.blank{
背景：黑色；
盒影：无；
}
@仅媒体屏幕
和（最小宽度：320px）
和（最大设备宽度：768px）
和（方向：景观）
{
#钟{
最高：15%；
}
}

您是否试图根据父时钟宽度提升整个时钟？这不会响应窗口宽度。当页面变小时，我希望正方形缩小到合适的位置（仍然彼此相邻）。bit类在它们上设置了一个宽度，因此您可以按百分比进行设置，并设置一个最大宽度，类似这样的事情-另一种方法是使用@media queries