窗口大小调整时查看中断

Question

我已经使用正方形创建了一个页面。 正方形组合成一个特定的单词。 但是，当我调整窗口大小时，正方形会随意摆弄它们的位置。 如何更改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>

Answer 1

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

同样，窗口调整大小事件本身是没有用的，因为div（id = container）根据body标签的宽度进行了调整

Answer 2

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

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

Answer 3

您的问题是css页边距是固定宽度的，因此即使正方形宽度以％为单位，页边距也会导致此问题。 例如，尝试禁用wrap1和wrapalphabet css类，您将看到您的设计将更加敏感。

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