如何使用CSS网格/JavaScript设置DIV宽度？

Question

我仍然是编程的初学者，并且在CSS网格方面几乎没有经验。

我需要渲染一个分为两列的组件。左列具有 minmax（570px，720px）宽度。右列的宽度为 minmax（380px，100VW）。

问题在于，左列永远不会改变其最小宽度为570px。

我需要左列为720px，直到屏幕为1440px。当屏幕小于1440px时，左列开始逐渐减小，直到达到570px。

你能告诉我如何做到这一点吗？

这是我将代码放入

我希望我能够很好地解释我需要解决的问题。

import React from "react";

const App = () => {
  const ref1 = React.useRef(null);
  const ref2 = React.useRef(null);
  const [width1, setWidth1] = React.useState(0);
  const [width2, setWidth2] = React.useState(0);

  React.useEffect(() => {
    setWidth1(ref1.current.offsetWidth);

    const getwidth = () => {
      setWidth1(ref1.current.offsetWidth);
    };

    window.addEventListener("resize", getwidth);

    return () => window.removeEventListener("resize", getwidth);
  }, []);

  React.useEffect(() => {
    setWidth2(ref2.current.offsetWidth);

    const getwidth = () => {
      setWidth2(ref2.current.offsetWidth);
    };

    window.addEventListener("resize", getwidth);

    return () => window.removeEventListener("resize", getwidth);
  }, []);

  return (
    <div
      style={{
        width: "100vw",
        height: "100vh",
        maxWidth: "100%"
      }}
    >
      <div
        style={{
          height: "100vh"
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "row"
          }}
        >
          <div
            ref={ref1}
            style={{
              border: "1px solid blue",
              backgroundColor: "lightblue",
              display: "grid",
              gridTemplateColumns: "minmax(570px, 720px)",
              fontSize: "30px"
            }}
          >
            Left - {width1}
          </div>
          <div
            ref={ref2}
            style={{
              border: "1px solid red",
              backgroundColor: "lightcoral",
              display: "grid",
              gridTemplateColumns: "minmax(380px, 100vw)",
              fontSize: "30px"
            }}
          >
            Right - {width2}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

非常感谢您的任何帮助

Answer 1

尝试查看最大宽度的最小宽度特性。

max-width:720px;
min-width:570px;

因为您希望DIV以精确的PX ID移动使用JS中的IF-ELSE条件