基于Div与TailwindCSS的气泡效果响应式适配问题

我用div和圆形背景构建气泡图案（暂时忽略DRY原则），部分气泡作为按钮。现在调整屏幕尺寸时，右侧气泡/按钮会被截断，无法完整显示。想知道能不能根据屏幕尺寸缩放适配，以及具体实现方法。

相关代码 #

Home.jsx #

import React from 'react'
import styles from "../style";
import Bubbles from './Bubbles';

const Home = () => {
  return (
...
<div className='flex flex-auto'>
        <Bubbles />
    </div>
...
)
}

Bubbles.jsx #

import React from 'react'
import styles from '../style'

const Bubbles = () => {
  return (
        <div className='flex flex-none'>
            <div className='flex-auto w-32 h-32 pattern-dots pattern-white pattern-bg-transparent pattern-opacity-60 pattern-size-2  rounded-full' />
            <div className='flex-auto w-8 h-8  rounded-full -mx-9 bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-96 h-96  rounded-full -mx-80 my-16 bg-orange-700 bg-opacity-50' />
            <div className='flex-auto w-40 h-40  rounded-full mx-36 my-44  bg-white ' />
            <button className='flex-auto w-80 h-80  rounded-full -mx-0 my-0  bg-green-700 bg-opacity-50 text-xl' >B1</button>
            <div className='flex-auto w-56 h-56  rounded-full -mx-32 my-96  bg-orange-700 bg-opacity-50 ' />
            <div className='flex-auto w-40 h-40  pattern-dots pattern-green-700 pattern-bg-transparent pattern-opacity-60 pattern-size-2  rounded-full' />
            <div className='flex-auto w-3 h-3  rounded-full  my-96  bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-5 h-5  rounded-full -mx-44 my-32  bg-orange-700 bg-opacity-50 ' />
            <div className='flex-auto w-32 h-32  rounded-full -mx-40 my-0  bg-orange-700 bg-opacity-50 ' />
            <div className='flex-auto w-24 h-24  rounded-full my-96  bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-32 h-32 my-64 pattern-dots pattern-orange-700 pattern-bg-transparent pattern-opacity-60 pattern-size-2  rounded-full' />
            <div className='flex-auto w-8 h-8  rounded-full -mx-96 my-96  bg-orange-700 bg-opacity-50 ' />
            <div className='flex-auto w-9 h-9  rounded-full mx-[32rem] my-[8rem]  bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-7 h-7  rounded-full -mx-96 my-96  bg-orange-700 bg-opacity-50 ' />
            <div className='flex-auto w-24 h-24  rounded-full mx-[40rem] my-[8rem]  bg-orange-700 bg-opacity-50 ' />
            <div className='flex-auto w-32 h-32  rounded-full -mx-[24rem] my-[2rem]  bg-orange-700 bg-opacity-50 ' />
            <div className='flex-auto w-32 h-32  rounded-full mx-[2rem] my-[16rem]  bg-orange-700 bg-opacity-50 ' />
            <button className='flex-auto w-80 h-80  rounded-full -mx-[1rem] my-[16rem]  bg-green-700 bg-opacity-50 text-xl' >B2</button>
            <div className='flex-auto w-6 h-6  rounded-full -mx-[32rem] my-[16rem]  bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-4 h-4  rounded-full mx-[25rem] my-[24rem]  bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-4 h-4  rounded-full mx-[25rem] my-[24rem]  bg-green-700 bg-opacity-50 ' />
            <button className='flex-auto w-96 h-96  rounded-full -mx-[44rem]   bg-orange-700 bg-opacity-50 text-xl' >B3</button>
            <div className='flex-auto w-44 h-44  rounded-full -mx-[3rem]   bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-32 h-32 mx-[2rem] my-[7rem] pattern-dots pattern-white pattern-bg-transparent pattern-opacity-60 pattern-size-2 rounded-full' />
            <div className='flex-auto w-32 h-32 -mx-[24rem] my-[20rem] pattern-dots pattern-white pattern-bg-transparent pattern-opacity-60 pattern-size-2 rounded-full' />
            <div className='flex-auto w-20 h-20  rounded-full mx-[20rem] my-[30rem]   bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-32 h-32 -mx-[18rem] my-[28rem] pattern-dots pattern-orange-700 pattern-bg-transparent pattern-opacity-60 pattern-size-2 rounded-full' />
            <div className='flex-auto w-2 h-2  rounded-full -mx-[3rem]   bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-10 h-10  rounded-full -mx-[13rem] my-[29rem]   bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-5 h-5  rounded-full -mx-[14rem] my-[30rem]   bg-green-700 bg-opacity-50 ' />
            <div className='flex-auto w-32 h-32  rounded-full mx-[36rem] my-[33rem]   bg-white  ' />
            <div className='flex-auto w-3 h-3  rounded-full my-3  bg-green-700 bg-opacity-50  ' />
            <div className='flex-auto w-4 h-4  rounded-full my-32  bg-green-700 bg-opacity-50  ' />
            <div className='flex-auto w-16 h-16  rounded-full my-96 mx-32  bg-green-700 bg-opacity-50  ' />
            <div className='flex-auto w-24 h-24  rounded-full my-3 mx-32  bg-white  ' />
            <div className='flex-auto w-80 h-80  rounded-full -mx-44 my-32  bg-green-700 bg-opacity-50' />
            <div className='flex-auto w-40 h-40  rounded-full -mx-32 my-60  bg-white  ' />


        </div>
  )
}

export default Bubbles

效果展示 #

大屏效果 #

小屏效果 #

可以通过缩放适配或响应式布局解决截断问题，以下是几种可行方案：

方案一：视口单位替换固定尺寸 #

将所有固定的rem/px单位替换为vw（视口宽度）或vh（视口高度）单位，让元素尺寸随屏幕宽度自动等比例缩放：

• 把w-96改为w-[24vw]，h-96改为h-[24vw]
• 定位值mx-[32rem]改为mx-[32vw]，my-[8rem]改为my-[8vw]

这种方式无需额外JS逻辑，纯CSS即可实现全屏幕适配，元素不会出现截断。

方案二：容器整体动态缩放 #

通过监听窗口尺寸，计算缩放比例，对气泡容器进行整体缩放：

import React, { useState, useEffect } from 'react'
import styles from '../style'

const Bubbles = () => {
  const [scale, setScale] = useState(1);

  useEffect(() => {
    const handleResize = () => {
      // 基准宽度设为大屏目标宽度，比如1920px
      const baseWidth = 1920;
      const currentWidth = window.innerWidth;
      // 计算缩放比例，最大不超过1（避免大屏下放大）
      const newScale = Math.min(currentWidth / baseWidth, 1);
      setScale(newScale);
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // 初始化时执行一次

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div 
      className='flex flex-none'
      style={{
        transform: `scale(${scale})`,
        transformOrigin: 'top left',
        width: '1920px', // 设置基准宽度
        height: 'auto'
      }}
    >
      {/* 原有气泡元素保持不变 */}
      <div className='flex-auto w-32 h-32 pattern-dots pattern-white pattern-bg-transparent pattern-opacity-60 pattern-size-2  rounded-full' />
      {/* ...其余元素省略 */}
    </div>
  )
}

export default Bubbles

同时修改Home.jsx外层容器，添加横向滚动支持：

<div className='flex flex-auto overflow-x-auto'>
  <Bubbles />
</div>

方案三：Tailwind响应式断点适配 #

利用Tailwind的响应式前缀（sm:/md:/lg:）为不同屏幕尺寸设置差异化的尺寸和定位值：

<div className='flex-auto w-24 h-24 md:w-32 md:h-32 lg:w-40 lg:h-40 rounded-full' />
<button className='flex-auto w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 rounded-full bg-green-700 bg-opacity-50 text-xl' >B1</button>

这种方式适合需要对不同屏幕布局做精细调整的场景，需为每个元素手动配置多断点样式。

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