如何使用@media screen实现按钮随浏览器窗口缩放自适应？

问题根源 #

你的响应式规则未生效的核心原因是缺少移动端viewport元标签——移动端浏览器默认会以桌面端视口宽度（通常为980px）渲染页面，导致max-width:375px的媒体查询永远不会触发。另外还有两处细节需要同步调整：

• 配套的.stroke动画边框尺寸未在媒体查询中更新
• 按钮用position:absolute + top:51%的居中方式不够灵活，尺寸变化后会出现偏移

修复方案 #

1. 添加viewport元标签
   在HTML的<head>中加入以下代码，让浏览器使用设备实际宽度作为视口宽度：

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

2. 完善媒体查询规则
   同步更新.stroke的尺寸，同时调整阴影、点击位移的参数，保持视觉比例一致：

@media screen and (max-width:375px) {
  #button {
    width: 100px;
    height: 60px;
    box-shadow: 0 6px 0 #58a700;
  }
  .stroke {
    width: 100px;
    height: 60px;
  }
  #button:active {
    transform: translateY(6px);
  }
}

3. 优化按钮居中方式
   替换硬编码的top:51%，使用transform实现绝对定位的完美居中，避免尺寸变化后偏移：

button {
  all: unset;
  display: inline-block;
  cursor: pointer;
  border-radius: 17px;
  z-index: 3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.stroke {
  z-index: 2;
  position: absolute;
  width: 300px;
  height: 130px;
  border-radius: 17px;
  outline: #58cc02 solid 3px;
  opacity: 0.5;
  animation: pulse 1.5s infinite alternate;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 同时修改动画里的transform，叠加居中逻辑 */
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1, 1.20);
  }
}

/* 按钮点击状态也要叠加居中逻辑 */
#button:active {
  box-shadow: none;
  transform: translate(-50%, -50%) translateY(10px);
}

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式按钮</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .parent {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    button {
      all: unset;
      display: inline-block;
      cursor: pointer;
      border-radius: 17px;
      z-index: 3;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #button {
      width: 300px;
      height: 130px;
      background-color: #58cc02;
      box-shadow: 0 10px 0 #58a700;
    }

    #button:active {
      box-shadow: none;
      transform: translate(-50%, -50%) translateY(10px);
    }

    .stroke {
      z-index: 2;
      position: absolute;
      width: 300px;
      height: 130px;
      border-radius: 17px;
      outline: #58cc02 solid 3px;
      opacity: 0.5;
      animation: pulse 1.5s infinite alternate;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    @keyframes pulse {
      0% {
        transform: translate(-50%, -50%) scale(1, 1);
      }
      100% {
        transform: translate(-50%, -50%) scale(1.1, 1.20);
      }
    }

    @media screen and (max-width:375px) {
      #button {
        width: 100px;
        height: 60px;
        box-shadow: 0 6px 0 #58a700;
      }
      .stroke {
        width: 100px;
        height: 60px;
      }
      #button:active {
        transform: translate(-50%, -50%) translateY(6px);
      }
    }
  </style>
</head>
<body>
  <div class="parent">
    <button id="button"></button>
    <div class="stroke"></div>
  </div>
</body>
</html>

关键说明 #

• viewport标签是移动端响应式的基础，必须添加才能让媒体查询按设备实际宽度触发
• 所有与按钮尺寸关联的元素（阴影、动画边框、点击位移）都要同步调整，保证视觉一致性
• 使用transform: translate(-50%, -50%)的居中方式，无论元素尺寸如何变化都能保持居中

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