桌面端垂直拆分首页屏幕 移动端用hero组件实现半高横向拆分可行吗？

完全可以通过hero组件实现移动端半高效果，不需要改动现有桌面端的成熟布局逻辑，只需要新增移动端响应式规则即可。

基础CSS实现方案 #

核心逻辑是通过媒体查询命中移动端视口时，修改hero容器和内部列的布局规则：

• 给hero根容器设置height: 100vh，占满设备全屏高度，同时把原有横向排列的flex布局改成纵向排列
• 给两个入口列分别设置height: 50%、width: 100%，每个入口刚好占半屏高度，无需滚动就能完整露出

示例代码如下：

/* 可根据实际业务断点调整触发宽度，通用移动端断点为768px */
@media (max-width: 768px) {
  .hero {
    height: 100vh;
    flex-direction: column;
  }
  /* 替换为实际使用的hero子列类名 */
  .hero__column {
    width: 100%;
    height: 50%;
    /* 保留原有内部内容对齐规则即可，比如flex居中 */
  }
}

UI框架适配方案 #

如果使用的是Tailwind、Bootstrap这类自带响应式工具类的UI框架，可以直接用内置类实现，无需额外写CSS：

• Tailwind 示例：给hero容器加h-screen md:h-auto flex flex-col md:flex-row类，给两个子列加h-1/2 md:h-auto w-full md:w-1/2类
• Bootstrap 示例：给hero容器加vh-100 vh-md-auto flex-md-row类，给两个子列加h-50 h-md-auto w-100 w-md-50类

兼容注意事项 #

如果单个入口内的内容过多，可能在极小屏设备上溢出半高区域，可以给子列加overflow-y: auto规则，允许单个区块内部滚动，不会撑破整体半高布局。

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