查看窗口大小调整大小

我使用正方形创建了一个页面。正方形组合起来形成一个特定的单词。但是，当我调整窗口大小时，广场以随意的方式打乱了他们的位置。我如何更改我的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

查看窗口大小调整大小

回答

相关问题