窗口调整大小时视图中断答案

【问题标题】：View disrupts on Window resize窗口调整大小时视图中断
【发布时间】：2013-01-12 13:51:03
【问题描述】：

我用正方形创建了一个页面。方块组合成一个特定的单词。但是当我调整窗口大小时，方块会随意打乱它们的位置。如何更改我的 CSS 或 javascript 以使方块在调整窗口大小时保持其原始位置？

您可以查看该页面：http://www.tryst-iitd.com/13/beta

我已包含以下代码来处理大小调整，但问题仍未解决。

<script type="text/javascript">
$(function () {
    var screenWidth = $(window).width() + "px";
    var screenHeight = $(window).height() + "px";
    $("#container").css({
        width: screenWidth,
        height:screenHeight,
    });
    $(window).resize( function () {
        var screenWidth = $(window).width() + "px";
        var screenHeight = $(window).height() + "px";
        $("#container").css({
            width: screenWidth,
            height:screenHeight,
        });
    });
});
</script>

【问题讨论】：

标签： javascript jquery html css window

【解决方案1】：

方块被打乱了，因为每当您调整窗口大小时，容器的宽度都会自动调整。为正方形设置一个固定值或设置一个最小宽度，容器应该可以解决问题。正方形宽度以 % 为单位。

另外，window resize 事件本身是没有用的，因为div（id=container）是根据body标签的宽度来调整的

【讨论】：

那么，您能提出更广泛的解决方案吗？
这取决于你想对你的页面做什么。如果您希望您的页面不破坏正方形，即固定宽度/高度，然后将容器宽度设置为 1000px，例如（并删除 javascript 中的调整大小事件）或者如果您希望您的页面是一个可以工作的全屏在所有分辨率页面上，您必须动态修改正方形的宽度/高度并设置最小宽度/最小高度
经过一些测试，容器的最小宽度应该是1237px。如果你想让它更小，你必须减小你的正方形的大小

【解决方案2】：

以百分比设置方块的位置和大小，调整大小的代码可以正常工作。

另外，设置min-width/min-height CSS 属性将防止您的正方形太小。

【讨论】：

没有关于正方形的位置。 float 属性的高度和宽度均以 % 为单位。

【解决方案3】：

您的问题是您的 css 边距是固定宽度，因此即使正方形宽度以 % 为单位，边距也会导致此问题。例如，尝试禁用 wrap1 和 wrapalphabet css 类，您会发现您的设计响应更快。

您可能必须重新考虑处理边距/填充的方式才能获得预期的结果。

【讨论】：