動態調整網頁大小

我正在開發一組小型Web應用程序，它們具有未知窗口大小作爲目標。爲了解決這個問題，我正在開發非常大的佈局，並根據窗口大小縮放它們。動態調整網頁大小

但是我的解決方案有一個不便之處。當我調整一切時，事情會變得有點不合適（主要是縮放文本時），這很明顯。我的代碼非常簡單，我的頁面中的所有內容都是絕對定位的，所以我只是得到縮放因子並將其應用於頁面中每個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)); 
}

這個問題一直在折磨我過去的一週。你有任何解決方法嗎？

來源

2013-05-21 Fabio Picchi

我似乎記得第在Google Closure Compier的頁面有一個JavaScript控制的頁腳。即它基於窗口大小進行定位。我想你可以看到比他們更糟糕的例子。 http://closure-compiler.appspot.com/home – enhzflep

請閱讀「響應式設計」。其中許多問題已經解決。 –

你有沒有理由不使用媒體查詢？和大小在EM？和其他任何響應式最佳實踐？ –

我建議您閱讀Responsive網頁設計。

它的工作原理把％，而不是精確的像素：

<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/

來源

2014-01-24 16:09:46 Despertaweb

動態調整網頁大小

回答

相關問題