窗口大小調整時查看中斷

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類，您將看到您的設計將更加敏感。

您可能必須重新考慮處理邊距/填充的方式才能獲得預期的結果。