调整窗口大小时调整页面大小

我的页面出现问题。
在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

调整窗口大小时调整页面大小

回答

相关问题