H5 활동 페이지의 모바일 단말 REM 레이아웃 적응 방법 분석

이 글은 H5 활동 페이지의 모바일 REM 레이아웃 적응 방법을 자세히 설명하는 관련 정보를 주로 소개합니다. 내용이 꽤 좋아서 지금 공유해 보겠습니다.

디자인 초안을 받은 후 레이아웃을 복원하는 방법은 무엇인가요?

정확하지 않은 반응형 디자인만 필요하다면 미디어 쿼리를 사용해도 괜찮습니다. 설계 초안을 정확하게 복원해야 하는 경우 일반적으로 확대/축소를 통해 수행됩니다. 일반적인 솔루션에는 뷰포트 기반 및 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 (width / height >= 360 / 640) {
            // 高度优先
            pageScale = height / 640;
        } else {
            pageScale = width / 360;
        }

        var content = 'width=' + 360 + ', initial-scale=' + pageScale 
          + ', maximum-scale=' + pageScale + ', user-scalable=no';
        document.getElementById('viewport').setAttribute('content', content);
        window.pageScale = pageScale;
    }
    if (isMobile) {
        setScale();
    } else {
        docEl.className += ' pc';
    }
})()

이 솔루션은 작년에 H5 활동 페이지 디자인에서 구현되었습니다.

하지만 PC에서 표시하고 싶다면 뷰포트에 줌 개념이 없기 때문에 고정된 값으로만 ​​설정할 수 있는데 이는 이상적이지 않습니다.

2 rem 레이아웃 적응 솔루션

rem 레이아웃 적응 솔루션은 많이 언급되어 왔으며 주요 인터넷 기업의 제품에 널리 사용되고 있습니다.

간단히 말하면 방법은 다음과 같습니다.

1. 디자인 초안과 장치 너비의 비율에 따라 HTML 루트 태그의 글꼴 크기를 동적으로 계산하고 설정합니다.

2. CSS에서는 디자인 초안 요소의 너비, 높이, 높이 상대 위치 및 기타 값은 동일한 비율로 rem 단위로 변환됩니다.

3. 디자인 초안의 글꼴은 px 단위를 사용하며 미디어 쿼리를 통해 약간 조정됩니다.

설명을 위해 예를 들어보겠습니다.

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
        if (width > 1080) { 
            width = 1080;
        }
        var  rem = width / 10;
        console.log(rem);
        docEl.style.fontSize = rem + 'px';
       // 部分机型上的误差、兼容性处理
        var  actualSize = win.getComputedStyle && parseFloat(win.getComputedStyle(docEl)["font-size"]);
        if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
            var remScaled = rem * rem / actualSize;
            docEl.style.fontSize = remScaled + 'px';
        }
    }
    var timer;
    //函数节流
    function dbcRefresh() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 100);
    }
    //窗口更新动态改变 font-size
    WIN.addEventListener('resize', dbcRefresh, false);
    //页面显示时计算一次
    WIN.addEventListener('pageshow', function(e) {
        if (e.persisted) { 
            dbcRefresh() 
        }
    }, false);
    setFontSize();
})(window)

또한 전체 화면 H5 활동 페이지의 경우 요구 사항이 있습니다. 이때 너비와 높이의 비율을 조정해야 합니다. 다음과 같이 할 수 있습니다:

function adjustWarp(warpId = '#warp') {
    // if (window.isMobile) return;
    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({
        height,
        width,
        postion: &#39;relative&#39;,
        top: 0,
        left: &#39;auto&#39;,
        margin: &#39;0 auto&#39;
    });
    // 重新计算 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';
    }

    return remVal;
}

예를 들어 디자인 초안에 크기가 460x210이고 상대 페이지 위치가 상단: 321px인 이미지가 있습니다. 위의 변환 방법에 따르면 요소의 최종 CSS 스타일은 다음과 같아야 합니다.

.img_demo {
    position: absolute;
    background-size: cover;
    background-image: url('demo.png');
    top: 2.97222rem;
    left: 0.64814rem;
    width: 4.25926rem;
    height: 1.94444rem;
}

2.3 rem 레이아웃 계획 개발 방법

위의 방법을 통해 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 {
    position: absolute;
    background-size: cover;
    background-image: url('demo.png');
    .px2remTLWH(321, 70, 460, 210);
}

여기서 너비와 높이는 다음과 같습니다. 디자인 초안에서 그림 요소로 직접 출력됩니다. 크기는 Photoshop에서 요소 위치를 지정하기 위해 안내선을 이동하여 빠르게 얻을 수 있습니다.

2.4 글꼴은 px를 단위로 사용합니다.

rem 비례 배율을 사용하는 글꼴은 표시 문제를 일으키므로 여러 크기를 설정하려면 미디어 쿼리만 사용하면 됩니다.

예시:

// 字体响应式
@media screen and (max-width: 321px) {
    body {
        font-size: 13px;
    }
}

@media screen and (min-width: 321px) and (max-width: 400px) {
    body {
        font-size: 14px;
    }
}

@media screen and (min-width: 400px) {
    body {
        font-size: 16px;
    }
}

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

JS 카운트다운 실패 문제를 해결하기 위해 WeChat 내장 H5 웹 페이지를 사용하는 방법

HTML5에서 모바일 복사 기능을 구현하는 방법

H5 가로 및 세로 화면 감지 방법

위 내용은 H5 활동 페이지의 모바일 단말 REM 레이아웃 적응 방법 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!