查看窗口大小調整大小

我使用正方形創建了一個頁面。正方形組合起來形成一個特定的單詞。但是，當我調整窗口大小時，廣場以隨意的方式打亂了他們的位置。我如何更改我的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>

來源

2013-01-12 xan

正方形被打亂，因爲每當您調整窗口大小時，容器的寬度會自動調整。設置一個固定值或設置一個最小寬度的正方形和容器應該解決問題。正方形寬度以％表示。

此外，窗口調整大小事件本身根據body標籤

來源

2013-01-12 14:42:21

那麼，您能否以更廣泛的方式提出解決方案？ – xan

這取決於您想要對頁面執行什麼操作。如果你希望你的頁面沒有被破壞的方塊，例如一個固定的寬度/高度，那麼例如將容器寬度設置爲1000px（並且在javascript中移除resize事件），或者如果你希望你的頁面是一個可以工作的全屏幕在所有分辨率頁面上，您必須動態修改方形的寬度/高度並設置最小寬度/最小高度集合 –

做了一些測試後，容器的最小寬度應爲1237px。如果你希望它減少，你必須減少你的廣場的大小 –

設置百分比的位置和您的正方形的大小的寬度和您的調整大小代碼，因爲在div（ID =容器）被調整是無用將工作正常。

此外，設置min-width/min-height CSS屬性將防止您的方塊太小。

來源

2013-01-12 15:17:40 Licson

關於廣場沒有立場。它們都是用'float'屬性在高度和寬度上的百分比。 – xan

您的問題是，您的CSS邊距是固定的寬度，所以即使方形寬度在％，邊距導致這個問題。例如，嘗試禁用wrap1和wrapalphabet css類，您將看到您的設計將更具響應能力。

您可能不得不重新考慮處理margin/padding以獲得預期結果的方式。

來源

2013-01-12 15:36:26 zoom

查看窗口大小調整大小

回答

相關問題