두 가지 이동 단말기 렘 레이아웃 구현 방법

현재 rem 레이아웃 제어에는 두 가지 스타일이 있는데, 그 중 하나는 CSS 미디어 쿼리를 통해 제어되고 다른 하나는 js를 도입하여 제어되는 것으로 이해됩니다. 두 방법 모두 장점이 있지만 여전히 import js 방법을 사용하는 것을 좋아합니다. rem 레이아웃을 구현하기 위해 현재 시중에 나와 있는 대부분의 방법은 CSS 미디어 쿼리를 사용하고 있습니다. 여기서는 다음 두 가지 방법을 요약하겠습니다.

방법 1: 일반적인 방법, CSS 미디어 쿼리

@media only screen and (max-width: 600px), only screen and (max-device-width:400px) {
  html,body {
    font-size:50px;
  }
}
@media only screen and (max-width: 500px), only screen and (max-device-width:400px) {
  html,body {
    font-size:40px;
  }
}
@media only screen and (max-width: 400px), only screen and (max-device-width:300px) {
  html,body {
    font-size:30px;
  }
}
.box{
  border: 1rem solid #000;
  font-size: 1rem;
}

이 방법에는 구현할 수 있습니다. CSS 파일을 통해서만 페이지를 로드하는 과정에서 요청되는 파일 수가 적지만, 사용하는 두 모바일 기기의 화면 너비가 크게 다르지 않으면 둘 다 미디어 쿼리에 포함됩니다. 동일한 범위가 설정된 경우 텍스트 크기 페이지에서는 변경되지 않지만 js를 소개하는 방법은 달라집니다.

방법 2: js 소개

// 需求：根据设计图的比例去动态设置不同屏幕下面对应的font-size值
// 这段JS不要添加入口函数，并且引用的时候放到最前面
// ui的大小根据自己的需求去改
// 设计图的宽度
var ui = 750;
// 自己设定的font值
var font = 40;
// 得到比例值
var ratio = ui/font;
var oHtml = document.documentElement;
var screenWidth = oHtml.offsetWidth;
// 初始的时候调用一次
getSize();
window.addEventListener('resize', getSize);
// 在resize的时候动态设置fontsize值
function getSize(){
  screenWidth = oHtml.offsetWidth;
  // 限制区间
  if(screenWidth <= 320){
    screenWidth = 320;
  }else if(screenWidth >= ui){
    screenWidth = ui;
  }
  oHtml.style.fontSize = screenWidth/ratio + 'px';
}

js를 도입하는 이 방법은 다양한 크기의 모바일 장치에 맞게 텍스트 크기와 기타 크기를 미묘하게 변경할 수 있습니다.

관련 권장 사항:

모바일 페이지 개발 적응 rem 레이아웃 원칙

모바일 페이지 remlayout_html/css_WEB-ITnose

react_javascript 기술에서 JavaScript의 rem 레이아웃 적용

위 내용은 두 가지 이동 단말기 렘 레이아웃 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!