function clampBuilder(minWidthPx, maxWidthPx, minFontSize, maxFontSize) {
  const root = document.querySelector("html");
  const pixelsPerRem = Number(getComputedStyle(root).fontSize.slice(0, -2));

  const minWidth = minWidthPx / pixelsPerRem;
  const maxWidth = maxWidthPx / pixelsPerRem;

  const slope = (maxFontSize - minFontSize) / (maxWidth - minWidth);
  const yAxisIntersection = -minWidth * slope + minFontSize;

  return `clamp(${minFontSize}rem, ${yAxisIntersection}rem + ${
    slope * 100
  }vw, ${maxFontSize}rem)`;
}

function calculateCh(element, fontSize) {
  const zero = document.createElement("span");
  zero.innerText = "0";
  zero.style.position = "absolute";
  zero.style.fontSize = fontSize;

  element.appendChild(zero);
  const chPixels = zero.getBoundingClientRect().width;
  element.removeChild(zero);

  return chPixels;
}

const initialRootFontSize = Number(
  getComputedStyle(document.querySelector("html")).fontSize.slice(0, -2)
);

function Header({ rootFontSize, setRootFontSize }) {
  const [viewportWidth, setViewportWidth] = React.useState(innerWidth);

  React.useEffect(() => {
    addEventListener("resize", () => setViewportWidth(innerWidth));
  }, []);

  const rootFontSizeHandler = (e) => {
    setRootFontSize(e.target.value);
    document.querySelector("html").style.fontSize = `${e.target.value}px`;
  };

  return (
    <div className="header">
      <h1>Viewport width: {viewportWidth}px</h1>
      <span>|</span>
      <label htmlFor="root-font-size">Root font size (px):</label>
      <input
        id="root-font-size"
        type="number"
        value={rootFontSize}
        min={12}
        max={20}
        onChange={rootFontSizeHandler}
      />
    </div>
  );
}

function App() {
  const [rootFontSize, setRootFontSize] = React.useState(initialRootFontSize);
  const articleRef = React.useRef();

  React.useEffect(() => {
    articleRef.current.style.fontSize = clampBuilder(320, 960, 0.7, 2.1);
    articleRef.current.style.width = `${
      (320 / calculateCh(articleRef.current, "0.7rem")) * 0.8
    }ch`;
  }, [rootFontSize]);

  return (
    <div>
      <Header {...{ rootFontSize, setRootFontSize }} />
      <article ref={articleRef}>
        <img src="https://studio.uxpincdn.com/studio/wp-content/uploads/2015/10/responsive-web-design.png" />
        <h1>Responsive design</h1>
        <p>
          In the early days of web design, pages were built to target a
          particular screen size. If the user had a larger or smaller screen
          than the designer expected, results ranged from unwanted scrollbars to
          overly long line lengths, and poor use of space.
        </p>

        <p>
          As more diverse screen sizes became available, the concept of
          responsive web design (RWD) appeared, a set of practices that allows
          web pages to alter their layout and appearance to suit different
          screen widths, resolutions, etc. It is an idea that changed the way we
          design for a multi-device web, and in this article, we'll help you
          understand the main techniques you need to know to master it.
        </p>

        <h1>Diversity of devices</h1>

        <blockquote>
          <p>
            Day by day the number of devices, platforms that need to work with
            your site grows. Responsive web design presents a fundamental shift
            in how we will build websites for the decades to come.
          </p>
          <p>— Jeffrey Veen</p>
        </blockquote>

        <p>
          The display resolution or display modes of a digital television,
          computer monitor or display device is the number of distinct pixels in
          each dimension that can be displayed. It can be an ambiguous term
          especially as the displayed resolution is controlled by different
          factors in cathode ray tube (CRT) displays, flat-panel displays
          (including liquid-crystal displays) and projection displays using
          fixed picture-element (pixel) arrays.
        </p>

        <p>
          It is usually quoted as width × height, with the units in pixels: for
          example, 1024 × 768 means the width is 1024 pixels and the height is
          768 pixels. This example would normally be spoken as "ten twenty-four
          by seven sixty-eight" or "ten twenty-four by seven six eight" (in
          American English; in British English, usually "one oh two four by
          seven six eight").
        </p>
      </article>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));