NextJS+Framer Motion网页小屏幕布局尺寸异常求助

在小屏幕设备上查看网页时，Banner区域布局显示异常（截图如下）：

已注释其他使用Framer Motion的组件，但问题仍存在，以下是排查和修复思路：

用户提供的代码 #

index.jsx #

import React from "react";
import Banner from "@/components/Banner";

function Home() {
  return (
    <main className=" ">
      <Banner />
    </main>
  );
}

export default Home;

Banner组件代码 #

import React from "react";
import { motion } from "framer-motion";
import Link from "next/link";

function Banner() {
  return (
    <section className="bg-[url('/1.jpg')] h-screen bg-no-repeat bg-cover relative">
      <div className="h-full w-full bg-gradient-to-r from-[#8a8dc5] via-[#14457b00] to-[#4383e8]"></div>
      <div className="flex justify-center w-full h-full md:w-auto md:h-auto absolute top-[15%] md:left-[15%]">
        <div className="max-w-xl p-10">
          <motion.div
            initial={{ x: "50%", opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.7, ease: "easeInOut", delay: 0 }}
          >
            <div className="py-2 px-3  inline-block tracking-wider rounded bg-purple-200 text-purple-500  font-semibold">
              <p className="text-sm md:text-base">PASSION FOR CARING</p>
            </div>
          </motion.div>
          <motion.div
            initial={{ x: "50%", opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.7, ease: "easeInOut", delay: 0.3 }}
            className="my-5"
          >
            <p className="uppercase font-bold text-2xl md:text-4xl tracking-widest">
              Reliable & High-Quality Health Care Services
            </p>
          </motion.div>
          <motion.div
            initial={{ x: "50%", opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.7, ease: "easeInOut", delay: 0.6 }}
          >
            <p className="text-slate-900 text-sm md:text-base">
              CleanMed Health Care Corporation is a newly organized company
              engaged in delivering high-quality healthcare services.
            </p>
          </motion.div>
          <motion.div
            initial={{ x: "50%", opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.7, ease: "easeInOut", delay: 0.9 }}
            className="mt-5"
          >
            <Link
              target="_blank"
              href="https://cleanmedhealthcare.com/"
              className="bg-purple-600 ease-in duration-150 hover:bg-purple-700 text-white py-2 px-4 rounded"
            >
              Learn More +
            </Link>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

export default Banner;

问题分析 #

核心问题出在Banner内部的绝对定位容器样式：

• 移动端下设置的h-full让容器高度占满屏幕，结合top-[15%]导致内容垂直位置异常，易出现截断或错位
• 移动端无左右内边距，内容紧贴屏幕边缘，进一步加剧布局混乱

修复后的Banner组件代码 #

import React from "react";
import { motion } from "framer-motion";
import Link from "next/link";

function Banner() {
  return (
    <section className="bg-[url('/1.jpg')] h-screen bg-no-repeat bg-cover relative">
      <div className="h-full w-full bg-gradient-to-r from-[#8a8dc5] via-[#14457b00] to-[#4383e8]"></div>
      {/* 调整响应式样式：移除移动端h-full、降低top值、添加左右内边距 */}
      <div className="flex justify-center w-full md:w-auto absolute top-[10%] md:top-[15%] md:left-[15%] px-4 md:px-0">
        <div className="max-w-xl p-10">
          <motion.div
            initial={{ x: "50%", opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.7, ease: "easeInOut", delay: 0 }}
          >
            <div className="py-2 px-3 inline-block tracking-wider rounded bg-purple-200 text-purple-500 font-semibold">
              <p className="text-sm md:text-base">PASSION FOR CARING</p>
            </div>
          </motion.div>
          <motion.div
            initial={{ x: "50%", opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.7, ease: "easeInOut", delay: 0.3 }}
            className="my-5"
          >
            <p className="uppercase font-bold text-xl md:text-4xl tracking-widest">
              Reliable & High-Quality Health Care Services
            </p>
          </motion.div>
          <motion.div
            initial={{ x: "50%", opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.7, ease: "easeInOut", delay: 0.6 }}
          >
            <p className="text-slate-900 text-sm md:text-base">
              CleanMed Health Care Corporation is a newly organized company
              engaged in delivering high-quality healthcare services.
            </p>
          </motion.div>
          <motion.div
            initial={{ x: "50%", opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ duration: 0.7, ease: "easeInOut", delay: 0.9 }}
            className="mt-5"
          >
            <Link
              target="_blank"
              href="https://cleanmedhealthcare.com/"
              className="bg-purple-600 ease-in duration-150 hover:bg-purple-700 text-white py-2 px-4 rounded"
            >
              Learn More +
            </Link>
          </motion.div>
        </div>
      </div>
    </section>
  );
}

export default Banner;

关键修改点 #

1. 移除移动端的h-full：避免容器高度占满屏幕，释放垂直空间
2. 调整移动端top值为10%：适配小屏幕垂直布局，让内容显示更合理
3. 添加移动端左右内边距px-4：防止内容紧贴屏幕边缘，提升可读性
4. 优化标题字体大小：移动端改为text-xl，避免文字溢出

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