javascript - 如何创建相对内联样式？

Question

我正在查看 Canvas 应用 The Eatery已经创建，我注意到布局是如何流畅的。特别是当页面变宽时，#main 列的左边距会变大。我用 Chrome 的检查器查看了 CSS，我看不到设置的属性是从左边缘的默认距离开始，但随着页面的长度而增长。有一个内联样式，但我不明白它是如何相对于窗口宽度的。

我可以使用 left:5%; 之类的东西来复制它，但我不认为这是此页面上特别发生的事情。因为，在检查器中观察它，它是基于像素的大小调整并使用百分比来保持 CSS 中的百分比。知道我似乎无法复制的那个页面上发生了什么吗？

我已经查看了大量关于 SO 的固定宽度问题，但似乎没有一个答案能做到这一点。

Answer 1

它是由 javascript onresize 事件生成的。

在这个特定的代码是:

var a=$(window).width()
b=184;
$("#main").css("left", Math.max( (a-500-600)/2, 20) ), 
    $(window).height() < 800 ?
    ($("#hand, .hand-image").addClass("smaller") , b=96 ) :
    $("#hand, .hand-image" ).removeClass( "smaller" ), $("#app-store").css("right", Math.min(a-850, b ) );

-- 从源代码中移除 --

思路很简单，获取文档或窗口的宽度，然后将 div 移动到基于大小的位置。在这种情况下，左边的值在 (a-500-600)/2 和 20 (px) 之间较高。