모바일 웹 페이지 자동 적응 솔루션

1. rem를 치수 단위로 사용
2. 사례 코드:

//            
$(function(){

    //resize():           ，  resize  
    $(document).ready(function(){
        updata_html_size(7.527);
    });

    //ready(): DOM（      ）    ，    （    ）       ，  ready  
    $(document).resize(function(){
        updata_html_size(7.527);
    });

    //init_size=         /     html    font-size  
    function updata_html_size(init_size){
        var width = $(window).width();
        if(width>=640)    //        
        {
            width = 640;
        }
        var w = width/init_size;
        $('html').css('font-size',w.toFixed(2)+'px');
    }

})

텐센트 규범 코드 사례:

 
    //     
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 640;
            html.style.fontSize = html.clientWidth / k * 100 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

모바일 웹 페이지 자동 적응 솔루션

1. rem를 치수 단위로 사용 2. 사례 코드: 텐센트 규범 코드 사례:...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

모바일 웹 페이지 자동 적응 솔루션

좋은 웹페이지 즐겨찾기