집 > 기사 > 웹 프론트엔드 > HTML5 페이지 rem 레이아웃 적응 방법에 대한 자세한 설명

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

小云云원래의: 2018-01-15 09:54:195148검색

이 글은 주로 HTML5 페이지의 rem 레이아웃 적용 방법에 대한 자세한 설명을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 공유하고 참고하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

rem 레이아웃 적응 솔루션

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

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

Lite 범용 버전:

!(function(win, doc){
  function setFontSize() {
    // 获取window 宽度
    // zepto实现 $(window).width()就是这么干的
    var winWidth =  window.innerWidth;
    // doc.documentElement.style.fontSize = (winWidth / 640) * 100 + &#39;px&#39; ;
    
    // 640宽度以上进行限制 需要css进行配合
    var size = (winWidth / 640) * 100;
    doc.documentElement.style.fontSize = (size < 100 ? size : 100) + &#39;px&#39; ;
  }

  var evt = &#39;onorientationchange&#39; in win ? &#39;orientationchange&#39; : &#39;resize&#39;;

  var timer = null;

  win.addEventListener(evt, function () {
    clearTimeout(timer);

    timer = setTimeout(setFontSize, 300);
  }, false);

  win.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      clearTimeout(timer);

      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
        if (width > 1080) { 
            width = 1080;
        }

        var  rem = width / 10;
        console.log(rem);

        docEl.style.fontSize = rem + &#39;px&#39;;

        // 误差、兼容性处理
        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 + &#39;px&#39;;
        }
    }

    var timer;

    function dbcRefresh() {
        clearTimeout(timer);
        timer = setTimeout(setFontSize, 100);
    }

    //窗口更新动态改变 font-size
    WIN.addEventListener(&#39;resize&#39;, dbcRefresh, false);
    //页面显示时计算一次
    WIN.addEventListener(&#39;pageshow&#39;, function(e) {
        if (e.persisted) { 
            dbcRefresh() 
        }
    }, false);
    setFontSize();
})(window)


//对H5活动推过页面，宽高比例有所要求，可适当调整

function adjustWarp(warpId = &#39;#warp&#39;) {

    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 CSS3 미디어 쿼리를 통해 rem 설정

간단하고 쉬움 유연성이 부족하다면 데모를 참조하세요.

@media screen and ( min-width: 320px){html{font-size:50px}}
@media screen and ( min-width: 360px){html{font-size:56.25px}}
@media screen and ( min-width: 375px){html{font-size:58.59375px}}
@media screen and ( min-width: 384px){html{font-size:60px}}
@media screen and ( min-width: 400px){html{font-size:62.5px}}
@media screen and ( min-width: 414px){html{font-size:64.6875px}}
@media screen and ( min-width: 424px){html{font-size:66.25px}}
@media screen and ( min-width: 480px){html{font-size:75px}}
@media screen and ( min-width: 540px){html{font-size:84.375px}}
@media screen and ( min-width: 640px){html{font-size:100px}}

개인 프로젝트 요구와 제품 디자인에 따라 적절하게 수정될 수 있습니다. 위의 데모 작성 방법은 독특하고 고정되어 있지 않습니다.

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

관련 기사