Question

我的网页出现问题在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吗？

Answer 1

听起来你想给出最小宽度和最小高度，迫使你的元素溢出。

我强制采用无响应的布局，这似乎是你的意图：这里的代码有一个小提琴：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>

请查看我链接的小提琴中的评论，它会分解哪条规则会导致哪些效果。

Answer 2

您可以使用JavaScript（请参阅onResize事件）或CSS媒体查询。

由于您的问题含糊不清，我们无法提供更多帮助。

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

2 个答案: