自适应设计中的高度调整难题?

Question

我有个rem自适应的问题，请教下各位大神们。我拿到设计稿是1920x1080的，因为浏览器顶部有个功能区域，，就是这里，会导致浏览器的可视高度小于1080px。我打算做rem的自适应，我设置了body的font-size:100px,再设置一个div的高度为1rem，获得的是100px，但是这和设计稿的100px是不一样的（因为多了浏览器的工具栏目），会导致ui错位。这该怎么解决呢？

我想的是怎么适配高度？设计稿1080的高度，浏览器可视高度小于1080.
我的自适应代码如下

export const selfAdapter = () => {
  //页面初始化，针对屏幕不是1920*1080的页面尺寸
  let designSize = 1920; // 设计图尺寸
  let html = document.documentElement;
  let wW = html.clientWidth; // 窗口宽度
  let rem = (wW * 100) / designSize;
  document.documentElement.style.fontSize = rem + "px";

  const resize = () => {
    let designSize = 1920; // 设计图尺寸
    let html = document.documentElement;
    let wW = html.clientWidth; // 窗口宽度
    let rem = (wW * 100) / designSize;
    document.documentElement.style.fontSize = rem + "px";
  };

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

Answer 1

或许你可以试试把获取的窗口宽度，改为窗口高度？