How to solve the problem of interface misalignment caused by height adjustment in adaptive design?

Cleverly solve the problem of height adjustment in adaptive design

In responsive design, height adjustment often causes interface dislocation problems. Especially when the design draft size (such as 1920x1080 pixels) does not match the browser's actual visual height, how to maintain the integrity of the interface layout is crucial.

For example, when using rem units for layout, the set body font size is 100px, a div height is 1rem, and the expected height is 100px. However, the toolbar on the top of the browser will occupy part of the height, resulting in the actual visible height being less than the design draft height, and eventually there will be misalignment.

An improvement is provided below. The existing adaptive code is mainly implemented by adjusting body 's font-size , and the code is as follows:

 export const selfAdapter = () => {
  //Page initialization, for page sizes that are not 1920*1080 on the screen, designSize = 1920; // Design drawing size let html = document.documentElement;
  let wW = html.clientWidth; // window width let rem = (wW * 100) / designSize;
  document.documentElement.style.fontSize = rem "px";

  const resize = () => {
    let designSize = 1920; // Design drawing size let html = document.documentElement;
    let wW = html.clientWidth; // window width let rem = (wW * 100) / designSize;
    document.documentElement.style.fontSize = rem "px";
  };

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

This code only calculates the rem value based on the window width, ignoring the impact of height changes. The key to the improvement is to adjust the basis for calculating rem value to the window height or the visible height. By monitoring the window height changes, the rem value is dynamically adjusted, so as to more accurately match the actual visible area height and avoid interface misalignment. Consider using window.innerHeight to get the visual height of the browser window and use it for the calculation of rem values.

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