如何用HTML和Tailwind CSS根据屏幕高度调整margin-top（mt-）？

方法一：自定义断点区分屏幕高度 #

在tailwind.config.js中添加一个针对md宽度但小高度屏幕的自定义断点，用来匹配手机横屏场景：

module.exports = {
  theme: {
    extend: {
      screens: {
        // 匹配宽度≥768px且高度≤600px的屏幕（手机横屏典型尺寸）
        'md-short': {'raw': '(min-width: 768px) and (max-height: 600px)'},
      },
    },
  },
  plugins: [],
}

之后在HTML元素上组合使用类名：

<div class="mt-12 md:mt-52 md-short:mt-16">
  <!-- 你的文本内容 -->
</div>

效果：宽度<640px时用mt-12；宽度≥768px且高度>600px（如Nexus 10竖屏）用md:mt-52；宽度≥768px且高度≤600px（如iPhone 11 Pro横屏）用md-short:mt-16。

方法二：内联自定义样式（无需修改配置） #

如果不想改动Tailwind配置，可直接在页面中添加自定义样式覆盖：

<style>
/* 针对手机横屏场景覆盖margin-top */
@media (min-width: 768px) and (max-height: 600px) {
  .mt-mobile-landscape {
    margin-top: 4rem; /* 对应Tailwind的mt-16，1rem=16px */
  }
}
</style>

<div class="mt-12 md:mt-52 mt-mobile-landscape">
  <!-- 你的文本内容 -->
</div>

方法三：基于宽高比精准匹配 #

如果要更精准区分横屏手机和平板，可使用宽高比媒体查询：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        // 匹配宽度≥768px且宽高比大于1.5:1的屏幕（手机横屏宽高比更高）
        'high-aspect': {'raw': '(min-width: 768px) and (aspect-ratio > 1.5/1)'},
      },
    },
  },
}

使用方式：

<div class="mt-12 md:mt-52 high-aspect:mt-16">
  <!-- 你的文本内容 -->
</div>

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