모바일 웹 개발 적합

1368 단어
장치 해상도에 따라 루트 요소의 fontSize를 설정하여 rem을 설정합니다.

    // 
    (function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                };

        if (!doc.addEventListener) return;
        recalc();
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);


모바일 웹 개발

  • 핸드폰 쪽에서 실행되는 웹 페이지(H5페이지)
  • 크로스플랫폼
  • 웹뷰 기반
  • 안녕히 계세요IE 포옹webkit
  • 더 높은 적합성과 성능 요구

  • 흔히 볼 수 있는 모바일 웹 맞춤법


    rem 원리와 안내


    rem,font size of the root element

    글꼴 단위

  • 값은 html 뿌리 원소의font-size 크기에 따라 정하고 너비, 높이 등 단위로 할 수 있다

  • 적합 원리

  • px를rem로 교체하고 html의font-size를 동적 수정하여 적합하다

  • 호환성

  • Ios6 이상과android2.1 이상으로 모든 유행하는 휴대전화 시스템을 기본적으로 커버한다

  • rem 진급

  • rem 기준치의 계산
  • rem 수치 계산 및 구축
  • rem과 scss를 결합하여 사용합니다
  • rem은 실전에 적합하다
  • 좋은 웹페이지 즐겨찾기