bluehaveninv网站移动端/平板端显示异常适配调整咨询

原有代码失效原因 #

1. 媒体查询仅覆盖了最大宽度767px的移动设备，完全没有适配768px~1024px区间的iPad设备
2. 给.site-header设置max-width: 80%反而挤压了头部容器的可用宽度，更容易触发内部元素换行
3. 选择器优先级可能低于主题原生样式，导致规则被覆盖

完整修复代码 #

/* 适配小于768px的移动端设备 */
@media (max-width: 767px) {
  /* 1. 修复header单行显示，汉堡菜单同屏展示 */
  .site-header {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  .site-branding {
    max-width: 65% !important;
    overflow: hidden !important;
  }

  /* 2. 修复滑块被header遮挡，文字单行适配 */
  .hero {
    padding-top: 65px !important; /* 数值可根据实际header高度调整 */
  }
  .hero__content h2 {
    font-size: 20px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 4. 修复「携手合作」板块移动端flex区块间距 */
  .cooperation-section { /* 请替换为「携手合作」板块flex容器的实际类名 */
    flex-direction: column !important;
    gap: 20px !important; /* 间距数值可自定义调整 */
  }
}

/* 适配768px~1024px的iPad平板设备 */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 3. 修复iPad端滑块小字显示过小 */
  .hero__small-text { /* 请替换为滑块小字对应的实际类名 */
    font-size: 16px !important; /* 数值可根据显示效果调整 */
  }

  /* 5. 修复平板端三区块布局第三个元素居中 */
  .service-section, .investment-section { /* 请替换为「服务内容」「投资理念」板块flex容器的实际类名 */
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }
  .service-section > .flex-item:last-child, 
  .investment-section > .flex-item:last-child { /* 请替换为对应子项的实际类名 */
    margin: 0 auto !important;
  }
}

补充优化说明 #

1. 滑块加载慢可同步做两个优化：一是给滑块用到的所有图片添加懒加载属性，二是给站点自定义字体配置font-display: swap属性，避免字体加载阻塞文字渲染
2. 代码中所有标注需要替换的类名，请在浏览器开发者工具的元素面板中找到对应模块的实际类名替换后再部署
3. 部署后可直接在设备上测试，若仍有规则未生效，可在开发者工具中检查对应元素的样式优先级，调整选择器权重即可

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