在窗口調整大小時增加和減少元素寬度

使用以瀏覽器窗口爲中心的內容區域的響應式佈局。在窗口調整大小時增加和減少元素寬度

Example of my layout

當曾經的窗口最小化獲取/最大化內容區域應該適合剩餘空間的左側和右側，所以沒有自由空間被浪費在小屏幕上。

爲了做到這一點，我做了一個小的JavaScript將做的工作，但它會導致大量的CPU。

有沒有一種方法來放大或縮小內容區域的寬度與純CSS的動態？

"use-strict"; 
(function(){ 
function init(){ 
    var foo = new bar(getView()); 

    function getView(){ 
     return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
    } 

    window.onresize = function(){ 
     foo(getView()); 
    } 
} 

function bar(i) { 
    return function(y){ 
     if(y > i) 
      console.log('max'); 

     if(y < i) 
      console.log('min'); 

     i = y; 
    } 
} 

window.addEventListener('load', init, false); 
})();

來源

2015-01-11 fubbe

查找到媒體查詢http://www.w3schools.com/cssref/css3_pr_mediaquery.asp – scniro

好一點，謝謝。在某些情況下工作，但它或多或少具有適應性，會使佈局有點跳躍。我正在尋找一種可以減少/增加流暢寬度的解決方案 – fubbe

媒體查詢不會讓您的佈局變得更加靈活，它只是允許您根據瀏覽器的寬度加載不同的CSS。如果你想讓它更流暢地移動，你可以添加一個緩動轉換。 –

對內容區域使用最小寬度。

.content { min-width : 200px; width:60%; }

來源

2015-05-18 14:56:56

你應該提供關於你的答案如何解決問題的說明。如果你這樣做，你的答案會更頻繁地進行更新。 –

您能否詳細說明您提出的解決方案？僅有代碼的答案不是很有用。 – Cristik

在窗口調整大小時增加和減少元素寬度

回答

相關問題