Media Query无响应求助：搜索标题、输入框及结果适配异常

核心问题1：缺少Viewport元标签 #

移动端响应式的基础是让浏览器以设备宽度渲染页面，你的代码未添加该元标签，导致媒体查询在移动端无法触发。

在<head>中添加：

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

核心问题2：搜索模块的宽度与定位逻辑错误 #

1. 搜索输入框：媒体查询中设置了width:100%，但父元素.search-bar无宽度限制且align-items:flex-start导致输入框宽度不受控，需调整：

.search-bar {
  flex-direction: column;
  align-items: center; /* 改回居中，避免输入框左对齐溢出 */
  padding: 0;
  width: 90%; /* 限制宽度，避免贴满屏幕边缘 */
  max-width: 600px;
}

2. 搜索结果容器：原绝对定位基于.search-container在小屏位置偏移，改为相对于.search-bar定位，同时匹配输入框宽度：

.search-results {
  top: calc(100% + 10px); /* 放在搜索框下方10px */
  left: 50%;
  transform: translateX(-50%); /* 仅水平居中 */
  width: 100%;
  max-width: 600px;
  height: 200px;
  overflow-y: auto;
}

同时给.search-bar添加position: relative，确保搜索结果的定位上下文准确。

3. 搜索标题：添加内边距避免文字贴屏幕边缘：

.search-title {
  padding: 0 20px;
}

核心问题3：卡片图片固定宽度溢出 #

你给卡片图片设置了固定WIDTH: 500PX，小屏会撑破卡片，需在媒体查询中覆盖：

.card:nth-child(n) img {
  width: 100%;
  max-width: 300px; /* 匹配卡片宽度 */
}

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="some content">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
<style>
  *{
    margin: 0px;
    padding: 0px;
  }

  body{
    overflow-x: hidden;
  }

  /* Styles for the search bar container */
  .search-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('https://mgecustomprints.s3.amazonaws.com/Brown+Wood+Minimalist+Profile+LinkedIn+Banner+(3).png');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 600px;
    margin: 0;
    padding: 0;
    margin-top: 0px;
  }

  .search-title {
    font-size: 60px;
    margin-bottom: 20px;
    color: #7c36ff;
    font-family: Canva Sans,Noto Sans Variable,Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
    text-shadow: -2px -2px 0 WHITE, 2px -2px 0 WHITE, -2px 2px 0 WHITE, 2px 2px 0 WHITE;
  }

  /* Styles for the search bar */
  .search-bar {
    display: flex;
    align-items: center;
    background-color: #7c36ff;
    padding: 10px;
    border-radius: 5px;
    position: relative; /* 添加定位上下文 */
  }

  .search-input {
    width: 600px;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    color:#7c36ff;
  }

  /* Styles for the search results dropdown */
  .search-results {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    display: none;
    background-color: #fff;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    width: 635px;
    max-height: 200px;
    overflow-y: auto;
  }

  .search-results.show {
    display: block;
  }

  .search-result {
    padding: 5px 10px;
  }

  .search-result a {
    text-decoration: none;
    color: #000;
  }

.card-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-top: 20px;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
}

.card {
  flex: 1;
  width: 300px;
  height: 500px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
  background: #7C36FF;
}

.card img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Random dummy image URLs */
.card:nth-child(1) img {
  content: url("https://mgecustomprints.s3.amazonaws.com/apparel.png");
  WIDTH: 500PX;
}

.card:nth-child(2) img {
  content: url("https://mgecustomprints.s3.amazonaws.com/request.png");
  WIDTH: 500PX;
}
.card:nth-child(3) img {
  content: url("https://mgecustomprints.s3.amazonaws.com/PACKAGED.png");
  WIDTH: 500PX;
}

.card:nth-child(4) img {
  content: url("https://mgecustomprints.s3.amazonaws.com/3P0B8216MARRICO+3.jpg");
  WIDTH: 500PX;
}

.card h3 {
  font-size: 18px;
  margin-bottom: 2px;
  color:WHITE;
}

.card p {
  font-size: 14px;
  color: WHITE;
  justify-content: center;
  align-content: center;
  padding-bottom: 5px;
}
</style>
<style>
@media screen and (max-width: 768px) {
  /* Styles for screens with a maximum width of 768px */
  .search-container {
    height: 100vh;
  }

  .search-title {
    font-size: 30px;
    text-align: center;
    margin-bottom: 10px;
    padding: 0 20px; /* 避免文字贴边 */
  }

  .search-bar {
    flex-direction: column;
    align-items: center;
    padding: 0;
    width: 90%;
    max-width: 600px;
  }

  .search-input {
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;
  }

  .search-results {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    height: 200px;
    overflow-y: auto;
  }

  .card-section {
    flex-direction: column;
    align-items: stretch;
  }

  .card-container {
    flex-direction: column; /* 卡片垂直排列 */
    width: 90%;
    margin: 0 auto;
  }

  .card {
    width: 100%;
    margin: 10px 0;
  }

  .card img {
    height: 200px;
    object-fit: cover;
  }

  /* 覆盖图片固定宽度 */
  .card:nth-child(n) img {
    width: 100%;
    max-width: 300px;
  }
}
</style>
</html>

额外说明 #

• 卡片容器.card-container在小屏需改为flex-direction:column，否则卡片横向排列会溢出屏幕。
• 所有元素优先使用百分比或max-width定义宽度，避免固定像素值导致小屏适配问题。

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