HTML5 페이지 rem 레이아웃 적응 방법에 대한 자세한 설명

주요 방법은 다음과 같습니다.

1. 디자인 초안과 장치 너비의 비율에 따라 HTML 루트 태그의 글꼴 크기를 동적으로 계산하고 설정합니다.
2. CSS에서는 디자인 도안 요소의 너비, 높이, 상대 위치 등을 동일한 비율에 따라 rem 단위의 값으로 변환합니다.
3. 디자인 초안의 글꼴은 px 단위를 사용하며 미디어 쿼리를 통해 약간 조정됩니다.

단순화된 일반 버전:

 !(function(win, doc){ function setFontSize() { // 창 너비 가져오기 // zepto가 $(window).width()를 구현하는 방법입니다. var winWidth = window.innerWidth; // doc.documentElement.style. FontSize = (winWidth / 640) * 100 + 'px' ; // 너비를 640 이상으로 제한하려면 CSS가 var 크기와 일치해야 합니다. = (winWidth / 640) * 100; doc.documentElement.style.fontSize = (크기 < 100 ? 크기: 100) + 'px' } var evt = win의 'orientationchange': 'resize'; 타이머 = null; win.addEventListener(evt, function () {clearTimeout(timer); 타이머 = setTimeout(setFontSize, 300); }, false); win.addEventListener(pageshow, function(e) { if (e.persisted) {clearTimeout(timer); 타이머 = setTimeout(setFontSize, 300); } }, false); //setFontSize() 초기화;}(window, document));

매우 정확한 버전:

 (function(WIN) { var setFontSize = WIN.setFontSize = function (_width) { var docEl = document.documentElement; // 현재 창의 너비를 가져옵니다. var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect( ).width; // 1080px보다 큰 경우 (너비 > 1080) { width = 1080; } var rem = width / 10; console.log(rem); docEl.style.fontSize = rem + 'px'; // 오류 및 호환성 처리 var ActualSize = win.getCompulatedStyle &&parseFloat( win .getCompulatedStyle(docEl)[글꼴 크기]); if (actualSize !== rem && ActualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / ActualSize = remScaled + 'px' } } var 타이머; = setTimeout(setFontSize, 100) } //창 업데이트는 글꼴 크기를 동적으로 변경합니다. WIN.addEventListener('resize', dbcRefresh, false); //페이지가 표시될 때 한 번만 계산합니다. WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh() } }, false) ; setFontSize ();})(window)//H5 활동 푸시 페이지의 경우 너비와 높이 비율이 필요하며 adjustWarp(warpId = '#warp') { const $win = $(window); const height = $win.height(); let width = $win.width() // if (width / height < 360 / 600) ) { return; } width = Math.ceil(height * 360 / 640) $(warpId).css({ 높이, 너비, 위치: '상대적', 상단: 0, 왼쪽: 'auto', margin: '0 auto' }); // rem window.setFontSize(width);}

사용하기는 쉽지만 유연성이 부족합니다. 데모를 보시면 이해하실 것입니다.

 @media 화면 및 ( min-width: 320px){html{font-size:50px}}@media 화면 및 ( min-width: 360px){html{font-size:56.25px}}@media 화면 및 ( min- 너비: 375px){html{font-size:58.59375px}}@media 화면 및 ( min-width: 384px){html{font-size:60px}}@media 화면 및 ( min-width: 400px){html{font-size:62.5px}}@media 화면 및 ( min-width: 414px){html{font- size:64.6875px}}@media 화면 및 ( 최소 너비: 424px){html{font-size:66.25px}}@media 화면 및 ( min-width: 480px){html{font-size:75px}}@media 화면 및 ( min-width: 540px){html{font- size:84.375px}}@media 화면 및 ( 최소 너비: 640px){html{글꼴 크기:100px}}

위의 데모 작성 방법은 개인 프로젝트 요구 사항 및 제품 디자인에 따라 적절하게 수정될 수 있습니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.