동적으로 웹 페이지 크기 조정

Question

알 수없는 창 크기를 대상으로하는 작은 웹 응용 프로그램을 개발하고 있습니다. 이 문제를 해결하기 위해 매우 큰 레이아웃을 개발하고 창 크기에 따라 크기를 조정합니다.

그러나 내 솔루션에는 불편이 있습니다. 모든 것을 크기를 조정하면 상황이 조금씩 바뀌고 (주로 텍스트 크기를 조정할 때) 눈에 띄게됩니다. 내 코드는 매우 간단합니다. 페이지의 모든 요소가 절대적으로 배치되므로 크기 조정 요소를 가져 와서 페이지의 모든 div/img/span/input의 모든 위치와 너비/높이에 적용해야합니다. 코드는 다음과 같습니다 :

function resize() 
{ 
    var wh = $(window).height(); 
    var h = maxHeight; 

    var ww = $(window).width(); 
    var w = maxWidth; 

    var wProp = ww/w; 
    var hProp = wh/h; 

    if (wProp < hProp) prop = wProp; 
    else prop = hProp; 

    if (prop > 1) prop = 1; 

    console.log(prop); 
    $("div").each (applyNewSize); 
    $("img").each (applyNewSize); 
    $("span").each (applyNewSize); 
    $("input").each (applyNewSize); 
} 
//this is run when the page is loaded 
function initializeSize (i) 
{ 
    this.oX = $(this).position().left; 
    this.oY = $(this).position().top; 
    this.oW = $(this).width(); 
    this.oH = $(this).height(); 
    if ($(this).css("font-size") != undefined) 
    { 
     this.oFS = Number($(this).css("font-size").split("px")[0]); 
    } 
} 

function applyNewSize (i) 
{ 
    if (this.oFS != undefined) $(this).css("font-size", Math.round(this.oFS * prop) + "px"); 
    $(this).css("left", Math.round(this.oX * prop) + "px"); 
    $(this).css("top", Math.round(this.oY * prop) + "px"); 
    $(this).width(Math.round(this.oW * prop)); 
    $(this).height(Math.round(this.oH * prop)); 
} 

이 문제는 지난 한 주 동안 저를 괴롭 히고 있습니다. 이 문제에 대한 해결 방법이나 해결책이 있습니까?

Answer 1

나는 반응 형 웹 디자인에 대해 읽어 보시기 바랍니다.

대신 정확한 픽셀 %를 넣어 작품 :

<div class="container"> 
    <section> 
    THIS IS THE SECTION 
    </section> 
</div> 

CSS ::

다음

.container{ 
    width: 80%; // 80% instead pixels 
    background: gainsboro; 
    border: 3px inset darkgrey; 
    height: 200px; 
    margin:auto; 
    text-align:center; 
} 


section{ 

    width: 80%; // 80% instead pixels 
    height: 80%; // 80% instead pixels 
    background: darkgrey; 
    margin:auto; 


} 

당신이 블록을 재 할당 또는 다른 폭에 다른 스타일을 적용 할뿐만 아니라, 미디어 쿼리를 사용할 수 있습니다 :

예제 튜토리얼 : http://css-tricks.com/css-media-queries/