React+Tailwind：移动端与大屏图片尺寸位置独立设置失效问题

问题根源 #

你现在的代码里存在两个关键错误：

• 响应式类写法不合法：sm:63 不是有效的Tailwind工具类，响应式前缀（sm:/md:/xl:）必须紧跟完整的属性类，比如sm:h-64、sm:bg-cover，单独写数值完全无效。
• 全局样式无断点区分：当前的h-screen w-screen是全设备生效的，没有为大屏设备单独覆盖这些属性，导致调整小屏样式时大屏同步变化。

解决方案 #

按以下步骤修改，即可实现移动端与大屏的图片样式独立控制：

1. 删除无效响应式类：直接去掉sm:63这类错误写法。
2. 为不同断点定义独立尺寸：用响应式前缀搭配尺寸工具类，比如移动端保留h-screen w-screen，大屏用xl:h-[90vh] xl:w-[95vw]自定义尺寸。
3. 配置响应式背景属性：针对不同断点设置bg-size和bg-position，比如移动端用bg-cover bg-center，大屏用xl:bg-contain xl:bg-left-top。
4. 按需调整定位层级：如果大屏需要修改图片位置或层级，同样用响应式前缀添加对应类，比如xl:top-4 xl:left-4。

修改后的代码 #

import { Outlet, Navigate } from 'react-router-dom';
import { motion } from "framer-motion"
import { MouseParallaxChild, MouseParallaxContainer } from "react-parallax-mouse";

const AuthLayout = () => {
  const IsAuthenthicated = false;
  return (
    <>
      {IsAuthenthicated ? (
        <Navigate to ="/" />
      ) : (
        <>
          <section className="flex flex-1 justify-center items-center flex-col py-10 relative z-10">
            <Outlet />
          </section>

          {/* 背景图片：移动端与大屏独立样式 */}
          <div
            className="absolute top-0 left-0 z-0 bg-no-repeat h-screen w-screen bg-cover bg-center 
                       xl:h-[90vh] xl:w-[95vw] xl:bg-contain xl:bg-left-top xl:top-4 xl:left-4"
            style={{ backgroundImage: `url("/assets/images/wall1.png")`  }}
          />
        </>
      )}
    </>
  )
}

export default AuthLayout

效果说明 #

• 移动端（小于768px）：图片占满全屏，背景图覆盖居中显示。
• 大屏设备（大于1280px）：图片尺寸缩小为90vh高、95vw宽，背景图自适应容器大小并定位到左上角，同时微调了top和left值。
• 给内容区添加relative z-10，确保内容始终显示在背景图上方。

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