如何用media-query实现Shopify Debut主题Hero区块的Div换行？

我来帮你搞定这个响应式布局的小麻烦！你遇到的情况是典型的桌面端并排布局在移动端适配失效——两个Div在小屏幕下宽度不够，导致右侧元素被挤出屏幕，确实需要调整媒体查询里的样式来修复。

具体操作步骤： #

1. 定位到目标媒体查询代码
   你提到的@include media-query($small)是Debut主题预定义的移动端断点（通常对应屏幕宽度≤768px的设备），所有移动端专属样式都要写在这个代码块里。

2. 根据你的布局类型修改display属性
   不同的布局方式（flex/float）适配方法略有不同，给你两种常见场景的解决方案：

   场景1：用Flex布局实现并排

   如果你的Hero区块容器用了flex来让两个Div并排，在移动端只需要把flex方向改成垂直排列：

   // 桌面端样式（示例）
   .hero-wrapper {
     display: flex;
     gap: $gutter-site; // 主题预设的间距变量
   }
   .hero-left, .hero-right {
     flex: 1; // 平分容器宽度
   }
   
   // 移动端适配修改
   @include media-query($small) {
     .hero-wrapper {
       flex-direction: column; // 切换为垂直堆叠
     }
     .hero-left, .hero-right {
       max-width: 100%; // 确保元素不超出屏幕
       padding-left: $gutter-site-mobile;
       padding-right: $gutter-site-mobile;
       margin-bottom: $gutter-site-mobile; // 给两个Div加底部间距，避免拥挤
     }
   }
   

   场景2：用Float布局实现并排

   如果是用float来做的并排，移动端需要清除浮动，并设置元素为块级占满宽度：

   // 桌面端样式（示例）
   .hero-left {
     float: left;
     width: 50%;
   }
   .hero-right {
     float: right;
     width: 50%;
   }
   
   // 移动端适配修改
   @include media-query($small) {
     .hero-left, .hero-right {
       float: none;
       display: block;
       width: 100%;
       max-width: $width-site;
       padding-left: $gutter-site-mobile;
       padding-right: $gutter-site-mobile;
       margin: 0 auto $gutter-site-mobile auto; // 居中+底部间距
     }
   }
   

3. 额外检查项

   • 确保你的Div没有设置固定宽度（比如width: 600px），固定宽度是移动端溢出的常见元凶，尽量用百分比或flex属性来适配。
   • 排查是否有其他CSS规则（比如min-width、overflow: hidden）影响了元素宽度，这些隐藏规则可能会干扰你的适配效果。
   • 测试时多切换不同的移动端屏幕尺寸，确保在手机、平板等设备上都能正常显示。

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