Flexible.js 신축 가능한 레이아웃 실현 방법 상세 설명

아리 단체가 개원한 창고flexible.js, 주로 각종 서로 다른 이동단 인터페이스에서 모든 설비의 호환성적응 문제를 원고로 해결하는 것을 실현한다.
구현 방법:
JS를 통해 html의 글씨체 크기를 조정하고 페이지의 제작 원고는rem이라는 단위를 통일하여 제작한다.주요 코드는 다음과 같습니다.

;(function(win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});
   
  if (metaEl) {
    console.warn(' meta ');
    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute('content');
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));  
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));  
      }
    }
  }
 
  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS ， 2 3 ， 2 ， 1 
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {        
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      //  ， 1 
      dpr = 1;
    }
    scale = 1 / dpr;
  }
 
  docEl.setAttribute('data-dpr', dpr);
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }
 
  function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  }
 
  win.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
  }, false);
  win.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);
 
  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = 12 * dpr + 'px';
  } else {
    doc.addEventListener('DOMContentLoaded', function(e) {
      doc.body.style.fontSize = 12 * dpr + 'px';
    }, false);
  }
   
 
  refreshRem();
 
  flexible.dpr = win.dpr = dpr;
  flexible.refreshRem = refreshRem;
  flexible.rem2px = function(d) {
    var val = parseFloat(d) * this.rem;
    if (typeof d === 'string' && d.match(/rem$/)) {
      val += 'px';
    }
    return val;
  }
  flexible.px2rem = function(d) {
    var val = parseFloat(d) / this.rem;
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem';
    }
    return val;
  }
 
})(window, window['lib'] || (window['lib'] = {}));

위의 코드는 주로 dpx와document의font-size 크기를 바꿨습니다.크기는 docEl입니다.getBoundingClientRect().width/10 + 'px';
만약에 우리의 디자인 원고 폭이 640이라고 가정하면 html의 글씨체 크기는 64px로 설정된다.1rem=64px에 해당한다.(1rem은 루트 노드에 대한 글꼴 크기에 해당)
만약에 하나의 원소의 폭이 160px라면 평소에 우리는 백분율을 사용하여 스스로 적응할 수 있다. 만약에 응답식을 사용한다면 320px에서 80px를 출력하고 640px에서 160px를 출력하는 등 여러 개를 설정해야 한다.상기 방법을 사용하면 2.5rem만 출력하면 통일을 실현할 수 있다. 다음과 같은 표:
장치 너비
320px
360px
414px
640px
Html 글꼴 크기
32px
36px
41.4px
64px
실제 출력
1rem
1rem
1rem
1rem
디자인 원고 크기 조정
80px
90px
103.5px
160px
실제 출력
2.5rem
2.5rem
2.5rem
2.5rem
이상 2.5rem은 어떻게 나왔나요?
160/64(1rem의 기수는 64px) = 2.5rem;정부의 견해에 따르면(750px 예시)
Flexible는 시각적 원고를 100부 (주로 앞으로 vh와 vw를 더욱 잘 호환할 수 있도록 하기 위해) 로 나누고, 한 부는 하나의 단위 a라고 부른다.동시에 1rem 단위는 10a로 인정되었다.이 시각적 자료는 다음과 같습니다.
1a = 7.5px
1rem = 75px
그러면 우리의 이 예시 원고는 10a로 나뉘었다. 즉, 전체 너비는 10rem이고 에 대응하는 font-size는 75px이다.
이렇게 하면 시각 원고의 원소 사이즈 환산에 대해 원시적인 px값을rem기준값으로 나누면 된다.예를 들어 이 시각 원고의 그림은 크기가 176px*176px이고 2.346667rem*2.346667rem로 변환된다.
또한 이것을 사용하여 적응된 또 다른 구덩이를 처리하는 것은 csssprite입니다. 저자의 건의는svg나 iconfont를 사용하는 것입니다.베이스64 등 다른 방안.
또한 dpr=2시에 작은 그림이 흐려질 수 있으므로 가장 큰 그림으로 그림을 자르는 것을 권장합니다.
글꼴 권장 px
저자의 관점에서 묘사적인 글씨체는 px를 사용하는 것을 권장한다. 만약에 slogan 같은 48px보다 큰 글씨체가 있다면rem를 사용할 수 있다. iPhone5와 아이폰6에서 글씨체가 다르기 때문에 13px와 15px, 점진 글씨체가 나타날 수 있다.
분명히 우리는 아이폰 3G와 아이폰 4의 Retina 화면 아래에서 보고 싶은 텍스트 번호가 같다.즉, 우리는 텍스트가 Retina 화면 아래에서 작아지는 것을 원하지 않는다. 또한 우리는 큰 화면 핸드폰에서 더 많은 텍스트를 보고 싶다. 그리고 현재 절대 다수의 글꼴 파일은 점진 사이즈를 가지고 있다. 보통 16px와 24px이기 때문에 우리는 13px와 15px와 같은 진기한 사이즈가 나타나는 것을 원하지 않는다.
이로써 H5를 만드는 페이지에서rem는 단락 텍스트에 적합하지 않다고 결정되었다.따라서 Flexible 전체 적합 방안에서 텍스트를 px로 사용할 것인지를 고려한다.단지 [data-dpr] 속성을 사용하여 서로 다른 dpr 아래의 텍스트 번호 크기를 구분할 뿐이다.

div {
  width: 1rem; 
  height: 0.4rem;
  font-size: 12px; //  dpr 1 fontSize
}
[data-dpr="2"] div {
  font-size: 24px;
}
[data-dpr="3"] div {
  font-size: 36px;
}

개발에 더욱 유리하도록 실제 개발에서 우리는 font-dpr()와 같은 Sass 혼합 매크로를 맞춤형으로 제작할 수 있다.

@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

이러한 혼합 매크로가 있으면 개발에서 바로 이렇게 사용할 수 있다.@include font-dpr(16px);물론 이것은 단지 묘사적인 텍스트, 예를 들어 단락 텍스트에 대한 것이다.그러나 때때로 텍스트의 번호도 장면을 나누어야 한다. 예를 들어 프로젝트에 slogan이 있는데 업무 측은 이 slogan이 서로 다른 단말기에 따라 적합하기를 바란다.이런 장면을 겨냥하여rem을 사용하여 slogan을 계량 단위로 할 수 있다.
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.