Question

我使用正方形创建了一个页面。正方形结合起来形成一个特定的单词。但是当我调整窗口大小时，方块会以随意的方式破坏它们的位置。我如何更改CSS或javascript以便广场在窗口大小调整时保留其原始位置？

查看该页面

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

<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 =容器）是根据body标签的宽度调整的

Answer 2

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

另外，设置min-width / min-height CSS属性可以防止你的方块太小。

Answer 3

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

您可能需要重新考虑处理保证金/填充的方式，以获得您期望的结果。

查看窗口调整大小的中断

3 个答案: