모바일 웹 개발 적합

장치 해상도에 따라 루트 요소의 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은 실전에 적합하다