적응 형 디자인의 높이 조정으로 인한 인터페이스 오정렬 문제를 해결하는 방법은 무엇입니까?

적응 형 디자인의 높이 조정 문제를 영리하게 해결

반응 형 설계에서 높이 조정은 종종 인터페이스 탈구 문제를 유발합니다. 특히 디자인 드래프트 크기 (예 : 1920x1080 픽셀)가 브라우저의 실제 시각적 높이와 일치하지 않으면 인터페이스 레이아웃의 무결성을 유지하는 방법이 중요합니다.

예를 들어, 레이아웃에 rem 단위를 사용할 때 세트 body 글꼴 크기는 100px이고 div 높이는 1REM이며 예상 높이는 100px입니다. 그러나 브라우저 상단의 도구 모음은 높이의 일부를 차지하여 실제 가시 높이가 설계 초안 높이보다 작으며 결국 잘못 정렬됩니다.

아래에 개선이 제공됩니다. 기존 적응 코드는 주로 body 의 font-size 조정하여 구현되며 코드는 다음과 같습니다.

 내보내기 const selfadapter = () => {
  // 화면에서 1920*1080이 아닌 페이지 크기의 페이지 초기화, designsize = 1920; // 디자인 드로잉 크기하자 html = document.documentElement;
  ww = html.clientWidth를하자; // 창 너비는 rem = (ww * 100) / designsize를 보자;
  Document.DocumentElement.style.fontsize = rem "px";

  const resize = () => {
    Designsize = 1920을하자; // 디자인 드로잉 크기하자 html = document.documentElement;
    ww = html.clientWidth를하자; // 창 너비는 rem = (ww * 100) / designsize를 보자;
    Document.DocumentElement.style.fontsize = rem "px";
  };

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

이 코드는 높이 변경의 영향을 무시하고 창 너비에 따라 rem 값 만 계산합니다. 개선의 핵심은 rem 값을 창 높이 또는 가시 높이로 계산하기위한 기초를 조정하는 것입니다. 창 높이 변경을 모니터링하면 실제 가시 영역 높이와 더 정확하게 일치하고 인터페이스 오정렬을 피하기 위해 rem 값이 동적으로 조정됩니다. window.innerHeight 사용하여 브라우저 창의 시각적 높이를 얻고 rem 값 계산에 사용하십시오.

위 내용은 적응 형 디자인의 높이 조정으로 인한 인터페이스 오정렬 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!