如何使用@media查询制作带附加功能的按钮：移动端点击变暗背景

你可以通过原生HTML、CSS、JavaScript组合实现该需求，核心逻辑是用CSS媒体查询限定仅移动端生效，点击按钮时切换全屏遮罩层的显示状态。

1. 编写HTML结构 #

<!-- 触发按钮 -->
<button id="toggleBtn">触发操作</button>
<!-- 背景变暗遮罩层 -->
<div id="darkMask"></div>
<!-- 页面原有内容 -->
<div class="page-content">
  你的页面其他内容
</div>

2. 编写CSS样式 #

/* 遮罩层基础样式 */
#darkMask {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.3s ease;
}

/* 激活状态：背景变暗 */
#darkMask.active {
  opacity: 1;
  pointer-events: auto;
}

/* 媒体查询：非移动端永久隐藏遮罩，避免桌面端生效 */
@media (min-width: 769px) {
  #darkMask {
    display: none !important;
  }
}

/* 按钮层级要高于遮罩，避免被遮罩挡住无法点击 */
#toggleBtn {
  position: relative;
  z-index: 1000;
}

3. 编写JS交互逻辑 #

const toggleBtn = document.getElementById('toggleBtn');
const darkMask = document.getElementById('darkMask');

// 绑定按钮点击事件
toggleBtn.onclick = function() {
  // 切换遮罩层激活状态
  darkMask.classList.toggle('active');
}

// 可选：点击遮罩层自动关闭暗背景
// darkMask.onclick = () => darkMask.classList.remove('active');

常见调整项 #

• 调整暗度：修改rgba(0, 0, 0, 0.6)的最后一个参数，取值范围0~1，数值越大背景越暗
• 修改移动端判定阈值：调整媒体查询的min-width: 769px数值即可，例如需要把平板划入移动端可以改为min-width: 1025px
• 关闭过渡动画：删除#darkMask样式中的transition属性
• 允许操作遮罩下层内容：将#darkMask.active内的pointer-events: auto改为pointer-events: none

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