缩放页面（放大、缩小）时样式会发生变化

Question

当我缩放页面（放大、缩小）时，样式仅在视觉上发生变化（带有数字的按钮）。但我没有任何@media 在此输入图片描述

我的代码按钮带有数字（没有状态，我在这段代码中删除了它们）

export default function InfoButton({ click, row, col, children }) {
  let cssBtn =
    "flex justify-center items-center relative before:absolute before:-top-[40%] before:left-1/2 before:-translate-x-1/2 before:text-black before:text-2xl aspect-square";

  if (styles) {
    cssBtn += " before:content-['x'] text-stone-400";
  }

  return (
    <button
      className={cssBtn}
      onClick={handleCloseNumber}
    >
      {children}
    </button>
  );
}

按钮块（也没有状态，我在这段代码中删除了它们）

export default function InfoField({ direction, infoTabs }) {
  const cssClasses = {
    mainDiv: "flex",
    row: "text-end flex-1 border border-stone-400",
  };

  let index

  if (direction === "vertical") {
    cssClasses.mainDiv += " flex-row w-full";
    cssClasses.row += " flex flex-col justify-end";

    index = selectedCol;
  } else {
    cssClasses.mainDiv += " flex-col w-full";
    cssClasses.row += " flex flex-row justify-end";

    index = selectedRow;
  }

  function getCorrectStyle(indexRow) {
    let css = cssClasses.row;

    if (direction === "vertical") {
      if ((indexRow + 1) % 5 === 0) {
        css += " border-r-black";
      } else if (indexRow % 5 === 0) {
        css += " border-l-black";
      }
    } else {
      if ((indexRow + 1) % 5 === 0) {
        css += " border-b-black";
      } else if (indexRow % 5 === 0) {
        css += " border-t-black";
      }
    }

    return css;
  }


  return (
    <div className={cssClasses.mainDiv}>
      {infoTabs.map((row, rowIndex) => {
        let css = getCorrectStyle(rowIndex);

        if(index == rowIndex && index){
          css += ' bg-orange-300'
        }
        else{
          css += ' bg-amber-200'
        }

        return (
          <div className={css} key={rowIndex}>
            {row.length === 0 ? (
              <InfoButton key={rowIndex + "1"} row={rowIndex} />
            ) : undefined}
            {row.map((cell, cellIndex) => {
              return (
                <InfoButton
                  click={() => {
                    handleCompleteRow(rowIndex, cellIndex);
                  }}
                  key={cellIndex}
                  row={rowIndex}
                  col={cellIndex}
                >
                  {cell}
                </InfoButton>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

我的主要组件

export default function GameField({ emptyRow, emptyCol }) {
  return (
    <FocusCellContext.Provider value={focusCellCxt}>
      <div className="">
        <section
          id="table"
          className="grid grid-cols-[1fr_3fr_1fr] grid-rows-[1fr_3fr_1fr]"
          onMouseMove={(e) => handleMove(e)}
        >
          <Table scale={10} info={true} />
          <InfoField direction="vertical" infoTabs={infoLineVertical} />
          <div></div>
          <InfoField direction="horizontal" infoTabs={infoLineHorizontal} />
          <Table emptyCol={emptyCol} emptyRow={emptyRow} />
          <InfoField direction="horizontal" infoTabs={infoLineHorizontal} />
          <div></div>
          <InfoField direction="vertical" infoTabs={infoLineVertical} />
        </section>
      </div>
    </FocusCellContext.Provider>
  );
}

我尝试设置 min-width，它有效，但我不想手动写这个宽度

Answer 1

试试这个

export default function InfoButton({ click, row, col, children }) {
  let cssBtn =
    "flex justify-center items-center relative before:absolute before:-top-[40%] before:left-1/2 before:-translate-x-1/2 before:text-black before:text-2xl aspect-square";

  if (styles) {
    cssBtn += " before:content-['x'] text-stone-400";
  }

  return (
    <button
      className={cssBtn}
      onClick={handleCloseNumber}
    >
      {children}
    </button>
  );
}

export default function InfoField({ direction, infoTabs }) {
  const cssClasses = {
    mainDiv: "flex",
    row: "text-end flex-1 border border-stone-400",
  };

  let index;

  if (direction === "vertical") {
    cssClasses.mainDiv += " flex-row w-full";
    cssClasses.row += " flex flex-col justify-end";

    index = selectedCol;
  } else {
    cssClasses.mainDiv += " flex-col w-full";
    cssClasses.row += " flex flex-row justify-end";

    index = selectedRow;
  }

  function getCorrectStyle(indexRow) {
    let css = cssClasses.row;

    if (direction === "vertical") {
      if ((indexRow + 1) % 5 === 0) {
        css += " border-r-black";
      } else if (indexRow % 5 === 0) {
        css += " border-l-black";
      }
    } else {
      if ((indexRow + 1) % 5 === 0) {
        css += " border-b-black";
      } else if (indexRow % 5 === 0) {
        css += " border-t-black";
      }
    }

    return css;
  }

  return (
    <div className={cssClasses.mainDiv}>
      {infoTabs.map((row, rowIndex) => {
        let css = getCorrectStyle(rowIndex);

        if (index === rowIndex && index) {
          css += " bg-orange-300";
        } else {
          css += " bg-amber-200";
        }

        return (
          <div className={css} key={rowIndex}>
            {row.length === 0 ? (
              <InfoButton key={rowIndex + "1"} row={rowIndex} />
            ) : undefined}
            {row.map((cell, cellIndex) => {
              return (
                <InfoButton
                  click={() => {
                    handleCompleteRow(rowIndex, cellIndex);
                  }}
                  key={cellIndex}
                  row={rowIndex}
                  col={cellIndex}
                >
                  {cell}
                </InfoButton>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

export default function GameField({ emptyRow, emptyCol }) {
  return (
    <FocusCellContext.Provider value={focusCellCxt}>
      <div className="">
        <section
          id="table"
          className="grid grid-cols-[1fr_3fr_1fr] grid-rows-[1fr_3fr_1fr]"
          onMouseMove={(e) => handleMove(e)}
        >
          <Table scale={10} info={true} />
          <InfoField direction="vertical" infoTabs={infoLineVertical} />
          <div></div>
          <InfoField direction="horizontal" infoTabs={infoLineHorizontal} />
          <Table emptyCol={emptyCol} emptyRow={emptyRow} />
          <InfoField direction="horizontal" infoTabs={infoLineHorizontal} />
          <div></div>
          <InfoField direction="vertical" infoTabs={infoLineVertical} />
        </section>
      </div>
    </FocusCellContext.Provider>
  );
}