집 > 기사 > 웹 프론트엔드 > 모바일 웹화면 적응 소개(rem)

모바일 웹화면 적응 소개(rem)

不言원래의: 2018-06-26 09:30:531846검색

이 글에서는 주로 모바일 웹화면 적응(rem)을 소개합니다. 모바일 웹화면 적응(rem)에 대해 자세히 소개하고 있는데, 내용이 꽤 괜찮아서 지금 공유해보겠습니다.

머리말

최근에 이전 프론트엔드 연구 노트를 정리해보니 모바일 웹의 화면 적응(rem) 측면을 잘 이해하지 못하고 사용법만 알고 있었네요.

다음으로 모바일 웹화면개작(렘)에 대한 여러분의 생각을 기록해보세요.

rem 소개

rem은 루트 요소(100db36a723c770d327fc0aef2ce13b1)의 글꼴 크기를 나타냅니다. 즉, 루트 요소의 글꼴 크기가 14px이면 1rem = 14px

rem 모바일 웹에 적응

적응 효과

다른 화면에서 동일한 요소의 크기 크기 크기는 달라 보이지만 화면 너비에서 동일한 비율을 차지합니다.

Code

// 在 html 文件的 head 标签中
<script type="text/javascript">
  (function(){
    var html = document.documentElement;
    // 获取屏幕宽度（px）
    var hWidth = html.getBoundingClientRect().width;
    // 设置 html 标签的 font-size 大小为 hWidth/15
    html.style.fontSize = hWidth/15 + &#39;px&#39;;
  })()
</script>

// 在 less 中
/* 定义变量@r：750/15 */
@r:50rem; 
p {
  width: 100/@r;
  height: 200/@r;
}

javascript code

먼저 html 태그의 글꼴 크기 속성에 화면 크기(px)의 1/15를 복사합니다. 이때 화면 크기(px)의 1/15픽셀은 모든 화면 크기에서 1rem의 크기와 같습니다. 즉, 모든 화면 크기에서 동일한 rem 값이 요소에 설정되어 있는 한 요소는 모든 화면 크기에서 화면 너비의 동일한 비율을 차지하며 비율은 동일하며 다음에 적응합니다. 모든 화면 크기.

less code

이제 디자인 초안에 있는 요소의 px 단위를 rem 단위로 변환하면 됩니다.

그래서 이때 디자인 시안은 특정 크기의 휴대폰 화면으로 취급할 수 있습니다.
제 예에서는 디자인 너비가 750px입니다.

그러니까 750/15 = 50px, 즉 디자인 시안 크기의 휴대폰 화면에서는 1rem = 50px입니다.

그런 다음 Less 코드에서 @r 변수를 정의합니다.

디자인 초안 크기의 화면에서는 1rem = 50px이므로 p의 너비는 100px로 측정되므로 p의 rem 값은 100/50 rem, 즉 100/@r입니다.

p의 높이는 200px로 측정됩니다. 디자인 초안 크기의 화면에서는 1rem = 50px이므로 p의 rem 값은 200/50 rem, 즉 200/@r입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

모바일 웹화면 적응 소개(rem)

관련 기사