How to solve the height problem by adjusting the rem unit in adaptive design?

Adaptive design: Cleverly solve the problem of height adjustment

In responsive design, precise control of page elements height is often a headache. Especially when the toolbar on the top of the browser takes up space, resulting in the actual visible height being less than the design draft height, how to ensure that the height of the page elements is consistent with the design draft has become a major challenge for developers.

Assume that the design draft size is 1920x1080 pixels, but the existence of the browser toolbar makes the actual visual height less than 1080 pixels. If you use rem units directly and set body 's font-size according to the width of the design draft, the page layout is likely to be biased.

You may have tried the rem scheme based on width adaptation:

 export const selfadapter = () => {
  let designWidth = 1920; // Design draft width let html = document.documentElement;
  let ww = html.clientWidth; // window width let rem = (ww * 100) / designWidth;
  html.style.fontSize = rem "px";

  const resize = () => {
    let rem = (ww * 100) / designWidth;
    html.style.fontSize = rem "px";
  };

  window.addEventListener("resize", resize, false);
};

This scheme calculates the rem value based on the window width, ignoring the height change. To address height differences caused by browser toolbar, a more effective strategy is to calculate the rem value based on window visual height.

The modified code is as follows:

 export const selfadapter = () => {
  let designHeight = 1080; // Design draft height let html = document.documentElement;
  let wh = html.clientHeight; // window height let rem = (wh * 100) / designHeight;
  html.style.fontSize = rem "px";

  const resize = () => {
    let rem = (wh * 100) / designHeight;
    html.style.fontSize = rem "px";
  };

  window.addEventListener("resize", resize, false);
};

By using clientHeight to obtain the visual height of the window and calculate the rem value based on the design draft height, the page height deviation caused by the browser toolbar can be effectively solved, ensuring that the height of the page element is consistent with the design draft, and avoiding UI misalignment. This enables 100px in the design draft to be converted to 1rem accurately in the browser.

The above is the detailed content of How to solve the height problem by adjusting the rem unit in adaptive design?. For more information, please follow other related articles on the PHP Chinese website!