調整窗口大小時調整頁面大小

我的頁面出現問題。
在Facebook或Twitter上，當您調整瀏覽器窗口的大小時，該頁面看起來像沒有調整大小時，我如何在頁面上執行此操作？例如，如果我有這個代碼，並調整了我的窗口大小，該框始終位於頁面中間，並且沒有被「阻止」。
嘗試用我的代碼調整頁面大小，框會移動並更改尺寸，我想避免這種情況。調整窗口大小時調整頁面大小

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title</title> 
    </head> 
<body> 

<div style="width:100px; height:100px; position:absolute; top:50%; left:50%; margin-top: -50px; margin-left: -50px; background:#ccc;"></div> 

</body> 
</html>

我能做什麼？我必須使用JavaScript嗎？

來源

2013-06-18 Alberto

你可以給你一個屏幕截圖嗎？ – Tyanna

對不起，阿爾貝託，我不明白你想要什麼。 –

@Alberto，你在說[響應式網頁設計]（http://en.wikipedia.org/wiki/Responsive_web_design「響應式網頁設計」）？ – chrismborland

這聽起來像是你正在尋找一個最小寬度和最小高度，迫使你的元素溢出。

我已經迫使非響應式佈局，這似乎是你的意圖：這裏有代碼的小提琴：重新格式化，像你在這裏http://jsfiddle.net/paperblankets/YTk6t/

，代碼：

<html> 
<body> 
<span style="display:block;min-width:280px;"> 
<div style=" width:250px; 
    /* Random dimentions */ 
    height:200px; 
    /* Random dimentions */ 
    display:inline-block; 
    /*Allow Elements to sit next to each other */ 
    margin: 10px; 
    /* Slight padding to see the elements */ 
    background:#ccc; 
    /* Slight color to see the elements */ 
    overflow: visible; 
    /* Allow elements to overflow, and scroll bar to appear */"></div> 
</span> 
</body> 
</html>

請查看小提琴我鏈接到的評論，它分解哪個規則導致哪些效果。

來源

2013-06-18 17:25:01 Levi

嘗試用我的代碼調整頁面大小，框會移動並更改尺寸，我想避免這種@Levi – Alberto

像這樣？ http://jsfiddle.net/paperblankets/YTk6t/ – Levi

賓果，我打算把它應用到我的頁面上。謝謝 – Alberto

您可以使用JavaScript（請參閱onResize事件）或CSS媒體查詢。

由於您的問題含糊不清，因此我們無法提供比這更多的幫助。

來源

2013-06-18 17:25:54 Mooseman

由於OP問題含糊不清，我無法幫助更多。 –

嘗試用我的代碼調整頁面大小，框會移動並更改尺寸，我想避免使用@Mooseman – Alberto

調整窗口大小時調整頁面大小

回答

相關問題