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

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

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