적응 형 디자인에서 REM 장치를 조정하여 높이 문제를 해결하는 방법은 무엇입니까?

적응 디자인 : 높이 조정 문제를 영리하게 해결합니다

반응 형 디자인에서는 페이지 요소 높이를 정확하게 제어하는 ​​것이 종종 두통입니다. 특히 브라우저 상단의 도구 모음이 공간을 차지할 때 실제 가시 높이가 설계 초안 높이보다 작아지면 페이지 요소의 높이가 설계 초안과 일치하는지 확인하는 방법이 개발자에게 주요 과제가되었습니다.

설계 초안 크기가 1920x1080 픽셀이라고 가정하지만 브라우저 도구 모음의 존재는 실제 시각적 높이를 1080 픽셀 미만으로 만듭니다. rem 단위를 직접 사용하고 설계 초안의 폭에 따라 body 의 font-size 설정하면 페이지 레이아웃이 바이어스 될 수 있습니다.

너비 적응에 따라 REM 체계를 시도했을 수 있습니다.

 내보내기 const selfadapter = () => {
  DesignWidth = 1920을하자; // 디자인 드래프트 폭
  ww = html.clientWidth를하자; // 창 너비는 rem = (ww * 100) / designwidth를하자;
  html.style.fontsize = rem "px";

  const resize = () => {
    rem = (ww * 100) / designwidth를하자;
    html.style.fontsize = rem "px";
  };

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

이 체계는 창 너비에 따라 REM 값을 계산하여 높이 변화를 무시합니다. 브라우저 도구 모음으로 인한 높이 차이를 해결하기 위해보다 효과적인 전략은 Window 시각적 높이를 기반으로 REM 값을 계산하는 것입니다.

수정 된 코드는 다음과 같습니다.

 내보내기 const selfadapter = () => {
  DesignHeight = 1080을하자; // 디자인 드래프트 높이로 html = document.documentElement;
  wh = html.clientHeight를하자; // 윈도우 높이는 rem = (wh * 100) / designHeight를 보자;
  html.style.fontsize = rem "px";

  const resize = () => {
    rem = (wh * 100) / designHeight를하자;
    html.style.fontsize = rem "px";
  };

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

clientHeight 사용하여 창의 시각적 높이를 얻고 설계 초안 높이를 기반으로 REM 값을 계산함으로써 브라우저 도구 모음으로 인한 페이지 높이 편차를 효과적으로 해결하여 페이지 요소의 높이가 설계 초안과 일치하고 UI 오정렬을 피할 수 있습니다. 이를 통해 디자인 드래프트에서 100px를 브라우저에서 정확하게 1REM으로 변환 할 수 있습니다.

위 내용은 적응 형 디자인에서 REM 장치를 조정하여 높이 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!