如何修改CSS实现元素随屏幕尺寸动态缩放避免布局破损

问题核心原因 #

布局破损的根本原因是所有元素都采用了固定像素宽度，未做屏幕适配：

• li元素固定宽度196px，屏幕宽度不足时会自动换行导致布局错位
• 进度条的::after伪元素固定宽度200px，不会随容器宽度自适应变化
• 未使用弹性布局做适配，元素无法随屏幕尺寸自动调整占比

修复步骤 #

1. 替换原有固定宽度布局为弹性盒模型 #

将ul改为flex布局，自动分配子元素宽度，替换原来的inline-block固定宽度写法：

ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px; /* 大屏最大宽度限制 */
  width: 90%; /* 小屏自动留左右边距 */
  list-style: none;
}
/* 统一设置li样式，删掉原有的.one/.two/.three等类的固定宽度配置 */
ul li {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 8px;
}
/* 保留第三个li的特殊对齐设置 */
ul li.three {
  top: 23.5px;
}

2. 修改进度条伪元素为自适应宽度 #

将原来固定200px的进度条宽度改为100%，同时隐藏最后一个节点右侧多余的进度条：

ul li .fas::after {
  content: '';
  background: #ccc;
  height: 5px;
  width: 100%; /* 替换原有固定值200px */
  display: block;
  position: absolute;
  left: 0;
  top: 130px;
  z-index: -1;
}
/* 最后一个节点不需要显示右侧进度条 */
ul li:last-child .fas::after {
  display: none;
}

3. 修复图片拉伸问题 #

取消图片固定高度设置，保持图片原始比例不被拉伸：

ul li img{
  width: 40px;
  height: auto; /* 替换原有固定值95px */
  max-height: 95px;
}

4. 增加小屏适配规则 #

通过媒体查询适配移动端等小尺寸屏幕，自动缩小元素尺寸：

@media (max-width: 768px) {
  ul li img {
    width: 30px;
  }
  ul li p {
    font-size: 60%;
  }
  .progress {
    margin: 100px auto; /* 小屏减少顶部边距 */
  }
  ul li .fas::after {
    top: 110px; /* 小屏调整进度条位置 */
  }
}

完整修改后的CSS代码 #

body{
  background-position: center;
  font-family: sans-serif;
  height :100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.progress img{
  width: 90px;
  margin-bottom: 20px ;
}
.progress {
  margin: 150px auto;
  width: 100%;
}
ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  margin: 0 auto;
  max-width: 1200px;
  width: 90%;
  list-style: none;
}
ul li {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 8px;
}
ul li.three {
  top: 23.5px;
}
ul li img{
  width: 40px;
  height: auto;
  max-height: 95px;
}
ul li .fas{
  background: #ccc;
  width: 16px;
  height: 16px;
  color: #fff;
  border-radius: 50%;
  padding: 5px;
}
ul li .fas::after {
  content: '';
  background: #ccc;
  height: 5px;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 130px;
  z-index: -1;
}
ul li:last-child .fas::after {
  display: none;
}
ul .two .fas{
  background: #01dcdc;
}
.imageThree {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.imageFour {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.imageFive {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
ul .two .fas::after {
  background: #01dcdc;
}
ul li:nth-child(1) .fas {
  background: #53AD8B;
}
ul li:nth-child(1) .fas::after {
  background: #53AD8B;
}
@media (max-width: 768px) {
  ul li img {
    width: 30px;
  }
  ul li p {
    font-size: 60%;
  }
  .progress {
    margin: 100px auto;
  }
  ul li .fas::after {
    top: 110px;
  }
}

内容的提问来源于stack exchange，提问作者codekarthi-dev