디자인 초안을 받은 후 레이아웃을 복원하는 방법은 무엇입니까?
정확하지 않은 반응형 디자인만 필요하다면 미디어 쿼리를 사용해도 괜찮습니다. 설계 초안을 정확하게 복원해야 하는 경우 일반적으로 확대/축소를 통해 수행됩니다. 일반적인 솔루션에는 뷰포트 기반 및 rem 기반 스케일링 솔루션이 포함됩니다.
1개의 뷰포트 확대/축소 구성표모바일 측에서는 뷰포트를 통해 페이지 크기 비율을 조정하여 목적을 달성할 수 있습니다.
간단히 말하면, 모든 너비와 높이 픽셀은 시각적 원고 출력과 동일하며, 뷰포트는 페이지 너비와 시각적 원고 너비의 비율을 통해 동적으로 설정됩니다. 확장 구성표 핵심 코드 참조:
(function () { var docEl = document.documentElement; var isMobile = window.isMobile /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent); function setScale( ) { var pageScale = 1; if (window.top !== window) { return pageScale } var width = docEl.clientWidth || 360; var height = docEl.clientHeight || 640; if (너비 / 높이 >= 360 / 640) { // 높이 우선순위 pageScale = 높이 / 640 } var 콘텐츠 = '너비=' + 360 + ', 초기 규모=' + pageScale + ', maximum-scale=' + pageScale + ', user-scalable=no'; document.getElementById('viewport').setAttribute('content', content); window.pageScale = pageScale; ; } else { docEl.className += ' pc' }})()이 솔루션은 작년 H5 활동 페이지 디자인에서 실행되었습니다.
하지만 PC에서 표시하고 싶다면 뷰포트 스케일링 개념이 없기 때문에 고정된 값으로만 설정할 수 있어 이상적이지 않습니다.
2rem 레이아웃 적응 솔루션rem 레이아웃 적응 솔루션은 자주 언급되어 왔으며 주요 인터넷 회사의 제품에 널리 사용됩니다.
간단히 말하면 방법은 다음과 같습니다.
설명하기 위해 예를 들어 보겠습니다.
2.1 html 태그의 글꼴 크기 크기를 동적으로 설정첫 번째 문제는 html 태그의 글꼴 크기를 동적으로 계산하는 것입니다. 이는 변환 비율이 어떻게 합의되는지에 따라 다릅니다. 예를 들어, 핵심 코드 참조는 페이지 너비의 10배입니다.
(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 && parsFloat(win.getCompulatedStyle(docEl)[font-size]) if (actualSize !== rem && ActualSize > 0 && Math.abs(actualSize - rem) > 1) { var remScaled = rem * rem / ActualSize = remScaled + 'px' } } var 타이머; {clearTimeout(타이머); 타이머 = setTimeout(setFontSize, 100); //창 업데이트는 글꼴 크기를 동적으로 변경합니다. WIN.addEventListener('resize', dbcRefresh, false) //페이지가 표시될 때 한 번 계산합니다. WIN.addEventListener('pageshow', function(e) { if (e.persisted) { dbcRefresh () } }, false); setFontSize();})(창)또한 전체 화면 H5 활동 페이지의 경우 화면 비율에 대한 요구 사항이 있으며 이때 조정이 이루어져야 합니다. 다음과 같이 할 수 있습니다:
function adjustWarp(warpId = '#warp') { // if (window.isMobile) return; const $win = $(window); const height = $win.height(); // 탐색 모음을 고려합니다. if (width / height < 360 / 600) { return; } width = Math.ceil(height * 360 / 640); $(warpId).css({ height, width, position: 'relative', top: 0, left: 'auto', margin: '0 auto' }) // rem 재계산 window.setFontSize(width);}이 크기 조정 방법을 따르면 거의 모든 장치에서 비례 크기 조정을 통한 정밀한 레이아웃을 얻을 수 있습니다.
2.2 요소 크기 값 방법두 번째 문제는 요소 크기의 값입니다.
예를 들어 디자인 초안의 너비를 1080px로 가정하면 쉽게 변환할 수 있도록 너비를 10등분하여 1rem = 1080 / 10 = 108px이 됩니다. 변환 방법은 다음과 같습니다.
const px2rem = function(px, rem = 108) { let remVal = parseFloat(px) / rem; if (typeof px === string && px.match(/px$/)) { remVal += 'rem' } remVal을 반환;}예를 들어, 디자인 초안에는 크기가 460x210이고 상대 페이지 위치가 상단: 321px, 왼쪽: 70;인 이미지가 있습니다. 위의 변환 방법에 따르면 요소의 최종 CSS 스타일은 다음과 같아야 합니다.
.img_demo { 위치: 절대; 배경-이미지: url('demo.png'); 왼쪽: 0.64814rem; 높이: 1.94444rem; 2.3 렘 레이아웃 방식의 개발 방법위의 방법을 통해 rem 레이아웃 방식이 구현된다. 그러나 rem 값을 수동으로 계산하는 것은 분명히 비현실적입니다.
less/sass 전처리 도구를 사용하면 믹스인 방법만 설정한 다음 디자인 초안의 실제 크기에 따라 값을 설정하면 됩니다. Less를 예로 들면 믹스인 참조는 다음과 같습니다.
// px를 rem으로.px2rem(@px, @attr: 'width', @rem: 108rem) { @{attr}: (@px / @rem);}.px2remTLWH(@top, @left, @width, @height, @rem: 108rem) { .px2rem(@top, top, @rem); .px2rem(@left, left, @rem); .px2rem(@width, width, @rem); .px2rem(@height, height, @rem);}이전 예제 요소의 경우 CSS 스타일은 다음과 같이 작성할 수 있습니다.
.img_demo { 위치: 절대; 배경 크기: 표지; 배경 이미지: url('demo.png'); .px2remTLWH(321, 70, 460, 210);여기서 너비와 높이는 디자인 초안에 출력된 그림 요소의 크기에서 직접 읽을 수 있으며, 위쪽/왼쪽 값은 Photoshop에서 요소 위치를 지정하기 위해 참조선을 이동하여 빠르게 얻을 수 있습니다.
2.4 글꼴은 px를 단위로 사용합니다.rem 비율을 사용하여 글꼴 크기를 조정하면 표시 문제가 발생합니다. 여러 크기를 설정하려면 미디어 쿼리만 사용하면 됩니다.
예시 참조:
// 글꼴 반응 @media screen and (max-width: 321px) { body { 글꼴 크기: 13px }}@media screen and (min-width: 321px) and (max-width: 400px) { body { 글꼴 - 크기: 14px; }}@media 화면 및 (최소 너비: 400px) { 본문 { 글꼴 크기: 16px }}위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.