求助：通过媒体查询隐藏滚动固定自定义报价表单问题

简化表单隐藏的CSS代码 #

你当前的三个媒体查询覆盖了220px到1670px的所有屏幕宽度，完全可以合并为一条规则，甚至不需要媒体查询（如果目标是在任何屏幕尺寸下都隐藏固定状态的表单）：

优化后的CSS方案

/* 直接隐藏所有状态下的固定表单，无需媒体查询 */
.quoteform-fixed {
  display: none !important;
}

/* 若后续需要恢复固定定位样式，可保留以下代码（当前需求下可注释） */
/* .quoteform-fixed {
  position: fixed;
  top: 35px;
  right: 35px;
  display: block;
} */

如果确实需要通过媒体查询控制（比如后续要针对特定宽度调整显示逻辑），可以合并为一条覆盖全范围的规则：

@media screen and (min-width: 220px) and (max-width: 1670px) {
  .quoteform-fixed {
    display: none !important;
  }
}

额外优化建议 #

1. 避免过度使用!important：可以通过提高选择器优先级替代强制覆盖，比如利用表单的ID来增强权重：

#quoteForm.quoteform-fixed {
  display: none;
}

该选择器优先级高于单独的类选择器，无需依赖!important。

2. JavaScript逻辑调整（可选）：如果完全不需要固定表单的功能，可直接移除滚动添加类的逻辑：

window.onscroll = function(){
  var top = window.pageYOffset || document.documentElement.scrollTop;
  var form = document.getElementById('quoteForm');
  // 移除添加fixed类的代码，保持表单原有状态
  if (top > 800) {
    // form.classList.add("quoteform-fixed");
  } else {
    form.classList.remove("quoteform-fixed");
  }
}

原问题代码回顾 #

固定表单基础CSS规则

.quoteform-fixed {
  position: fixed;
  top: 35px;
  right: 35px;
  display: block;
}

原媒体查询代码

@media screen and (max-width:1670px) and (min-width:1199px){
  .quoteform-fixed {display:none !important}
}
@media screen and (max-width:1198px) and (min-width:767px){
  .quoteform-fixed {display:none !important}
}
@media screen and (max-width:766px) and (min-width:220px){
  .quoteform-fixed {display:none !important}
}

表单HTML结构

<div id="quoteForm" class="quote-form">
  <div id="quoteFormHead"></div>
    <form action="<?php the_permalink(); ?>" method="post">
      <div id="quoteFormBody">
        <div class="formfullwrapper">
          <input type="text" name="message_fname" placeholder="Enter your full name here...">
        </div>
        <div class="formfullwrapper">
          <input type="email" name="message_email" placeholder="Enter your email address here...">
        </div>
        <div class="formfullwrapper">
          <input type="number" name="message_phone" placeholder="Enter your phone number here...">
        </div>
        <div class="formfullwrapper">
          <textarea name="message_msg" placeholder="Details, please! Audience? Word count? Type of document? Tone? Deadlines? Sensitive content?"></textarea>
        </div>
      </div>
      <div id="quoteFormFooter">
        <div class="formfullwrapper">
          <input type="submit" id="submitform" value="Get my free quote">
        </div>
      </div>
    </form>
  </div>

滚动事件JavaScript代码

window.onscroll = function(){
  var top = window.pageYOffset || document.documentElement.scrollTop;
  var form = document.getElementById('quoteForm');
  if (top > 800) {
    form.classList.add("quoteform-fixed");
  } else {
    form.classList.remove("quoteform-fixed");
  }
}

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