如何为带图片的卡片设置Media Queries（媒体查询）

核心问题排查及修复方案 #

1. 样式优先级错误 #

你当前把媒体查询代码写在了全局普通样式的前面，CSS执行顺序是后写的覆盖前写的，所以移动端下媒体查询的属性会被后面的全局样式直接覆盖，导致适配不生效。只要把媒体查询代码移到所有全局样式的末尾即可。

2. 卡片容器flex布局适配缺失 #

#prices 用了flex布局，默认是横向排列，移动端竖屏宽度不够，三个卡片横向挤在一起会超出屏幕。需要在移动端媒体查询中把flex方向改成纵向排列。

3. 容器内边距过大 #

#prices 全局设置了padding: 100px，移动端竖屏总宽度本身就小，左右各100px的内边距会直接把卡片内容挤到可视区域外，需要在移动端把内边距改小。

4. 必加viewport元标签 #

移动端适配必须在HTML的<head>里加viewport配置，否则手机会默认按PC端宽度渲染页面，媒体查询不会生效：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

修改后的完整CSS代码： #

/* 全局样式放前面 */
#prices {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px;
  margin: 10px;
}

.listdrop {
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid;
  list-style-type: none;
  width: 10vw;
}

img {
  max-width: 100%;
  height: auto;
}

/* 媒体查询统一放最后 */
@media (max-width: 600px) {
  #prices {
    width: 100%;
    flex-direction: column; /* 纵向排列卡片 */
    padding: 20px 10px; /* 缩小内边距 */
    box-sizing: border-box; /* 避免padding撑宽容器 */
  }
  .listdrop {
    width: 100%;
    max-width: 300px; /* 限制卡片最大宽度避免太宽 */
    margin: 10px 0; /* 卡片之间加纵向间距 */
  }
  .casual {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

额外修复建议 #

你现有HTML里按钮标签存在语法错误，<li>上写a href属性是无效的，建议改成标准的按钮嵌套链接写法：

<li>
  <button type="button" class="butn">
    <a href="#">Buy</a>
  </button>
</li>

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