如何为HTML与CSS编写的带头部卡片实现响应式适配

现有代码核心问题 #

• 区块（section2/section3）使用固定边距、固定高度，固定margin-left会导致小屏幕下横向溢出，固定的margin-top在不同尺寸屏幕下会出现布局错位
• 卡片使用固定宽高，小屏幕下无法自适应容器宽度，容易出现横向滚动条
• 卡片内容区写死了固定宽度，和卡片本身的适配逻辑不兼容
• 仅用hover触发卡片内容展开，移动端设备没有hover事件，用户无法查看卡片完整内容
• 相同idbtn2重复使用，不符合HTML规范，会导致样式、JS选择器异常
• 标题h3的固定margin-left在小屏幕下会出现错位

具体优化方案 #

1. 先修改HTML小问题 #

把所有按钮的id="btn2"改成class="btn2"，id属性不能在同一页面重复使用。

2. 替换原有CSS对应部分，完成响应式适配 #

/* 合并section通用样式，避免重复代码 */
.section2, .section3{
  width: 95%;
  min-height: 2.2rem; /* 用min-height代替固定height，避免内容溢出 */
  background-color: #182035;
  /* 左右边距用auto居中，代替固定margin-left */
  margin: 7rem auto 0;
  text-align: left;
  padding: 0.5rem 0;
}
/* 单独调整section3上边距，去掉固定的30rem，用适配性更好的相对间距 */
.section3{
  margin-top: 4rem;
}

h3{
  position: relative;
  z-index: 40;
  color:#ecb445;
  /* 左边距改成相对值，适配不同屏幕宽度 */
  margin-left: 1.5rem;
  font-family: Coldiac;
}

.container{
  background-color:#ecb445;
  border-radius: 0.5rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin: 1rem auto !important; /* 覆盖默认边距，适配section宽度 */
  width: 98%;
}

/* 卡片响应式优化 */
.card {
  /* 最大宽度固定20rem，宽度100%自适应容器 */
  width: 100%;
  max-width: 20rem;
  /* 用aspect-ratio保持正方形比例，比固定height适配性好 */
  aspect-ratio: 1 / 1;
  background-color: #fff;
  border:0.2rem solid #182035;
  overflow: hidden;
  position: relative;
  display: flex;
  cursor: pointer;
  justify-content: center;
  transition: all ease 0.4s
}

.card img {
  /* 图片最大宽度限制，避免溢出 */
  max-width: 110%;
  height:auto;
  margin-top: -2.5rem;
  transition: all ease 0.4s;
}

.card:hover img,
/* 新增点击态适配移动端 */
.card:active img,
.card:focus img {
    margin-top: 1rem;
}

.card .content {
  /* 内容区宽度100%适配卡片宽度 */
  width: 100%;
  min-height: 70%;
  background: #fff;
  position: absolute;
  bottom: -70%;
  left: 0;
  transition: all ease 0.5s;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}

.card .content .category {
    font-size: clamp(1rem, 2vw, 1.1rem); /* 用clamp实现字体大小响应式 */
    font-weight: 600;
}

.card .content p {
    font-weight: 500;
    font-size: clamp(0.75rem, 1.5vw, 0.85rem); /* 字体大小响应式适配 */
}

.card:hover .content,
/* 移动端点击展开内容 */
.card:active .content,
.card:focus .content {
    bottom: 0%
}

.buttons button {
    border-radius: 1px;
    margin-bottom: 10px;
    transition: all ease 0.3s
}

.content {
    padding: 1rem 1rem;
}

.category{
  padding-bottom: 1rem;
}

/* id改class后的样式 */
.btn2{
  background-color:transparent;
  border-color: #df4648;
  color:#df4648;
}

.btn2:hover{
  background-color:#df4648;
  color: #fff;
}

/* 小屏幕额外适配 */
@media screen and (max-width: 768px) {
  .section2, .section3 {
    width: 98%;
    margin-top: 3rem;
  }
  h3 {
    margin-left: 1rem;
    font-size: 1.2rem;
  }
}

3. 可选优化 #

可以给所有卡片加tabindex="0"属性，让卡片可以被聚焦，移动端点击体验更流畅，示例：

<div class="card" tabindex="0">

修改完成后你使用的Bootstrap栅格系统就能正常生效，大屏3列、小屏1列的布局会自动适配，卡片不会出现溢出问题，移动端也能正常点击查看卡片完整内容。

内容的提问来源于stack exchange，提问作者Nymphalys