페이지 맞춤

    
    
    
    
    
    
    
    
    
    
       (function(){
        var resizeEvent =  'orientationchange' in window ? 'orientationchang' :'resize';
        var rescale = function(){
             var deviceWidth = document.documentElement.clientWidth;
              if(deviceWidth > 640) deviceWidth = 640;
              document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
                //640    100    rem  1rem=100px;    px rem   100
        }
        window.addEventListener(resizeEvent,rescale,false);
        document.addEventListener('DOMContentLoaded',rescale,false);
       })();
    

body의width는640/100=6.4remhtmlfont-size는 추가 미디어 조회가 필요할 수 있으며,font-size는rem를 사용할 수 없습니다. 예를 들어 네트워크의 설정:

  html
  @media screen and (max-width:321px){ .m-navlist{font-size:15px}}
@media screen and (min-width:321px) and (max-width:400px){ .m-navlist{font-size:16px}}
@media screen and (min-width:400px){ .m-navlist{font-size:18px}}

px:를 사용하면 코드를 추가합니다.