나는 최근에 이전 프론트엔드 연구에서 노트를 정리했는데 모바일 웹의 화면 적응(rem) 측면을 실제로 이해하지 못하고 그것을 사용하는 방법만 알고 있다는 것을 발견했습니다.
다음으로 모바일 웹화면적응(rem)에 대한 여러분의 생각을 적어보세요.
렘 소개rem은 루트 요소(<html>)의 글꼴 크기를 나타냅니다. 즉, 루트 요소의 글꼴 크기가 14px이면 1rem = 14px입니다.
rem은 모바일 웹에 적응합니다 적응 효과크기가 다른 화면에서는 동일한 요소의 크기가 동일하게 나타나지 않지만 요소가 차지하는 화면 너비의 비율은 동일합니다.
암호
// html 파일의 head 태그에서 <script type=text/javascript> (function(){ var html = document.documentElement; // 화면 너비(px)를 가져옵니다. var hWidth = html.getBoundingClientRect().width; // html 태그의 글꼴 크기를 hWidth/15로 설정합니다. html.style.fontSize = hWidth/15 + 'px'; })()</script> // less/* 변수 정의 @r: 750/15 */@r:50rem; div { width: 100/@r; height: 200/@r;} 자바스크립트 코드먼저 화면 크기(px)의 1/15을 html 태그의 글꼴 크기 속성에 복사합니다. 이때 화면 크기(px)의 1/15픽셀은 모든 화면 크기에서 1rem의 크기와 같습니다. 즉, 모든 화면 크기에서 동일한 rem 값이 요소에 설정되어 있는 한 요소는 모든 화면 크기에서 화면 너비의 동일한 비율을 차지하며 비율은 동일하며 다음에 적응합니다. 모든 화면 크기.
적은 코드이제 디자인 초안에 있는 요소의 px 단위를 rem 단위로 변환하면 됩니다.
따라서 현시점에서는 디자인 시안을 일정 크기의 휴대폰 화면으로 간주할 수 있다.
제 예에서는 디자인 초안의 너비가 750px입니다.
따라서 750/15 = 50px, 즉 디자인 시안 크기의 휴대폰 화면에서는 1rem = 50px이 됩니다.
그런 다음 Less 코드에서 @r 변수를 정의합니다.
디자인 초안 크기의 화면에서는 1rem = 50px이므로 div의 너비는 100px로 측정되므로 div의 rem 값은 100/50 rem, 즉 100/@r이 됩니다.
div의 높이는 200px로 측정되는데, 디자인 초안 크기의 화면에서는 1rem = 50px이므로 div의 rem 값은 200/50 rem, 즉 200/@r이 되기 때문입니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.