javascript - 使用 CSS 和 JavaScript 进行比例缩放

Question

我正在尝试制作一个根据窗口大小调整大小的网页，下面的代码似乎是解决方案。

var scale = Math.min( availableWidth/contentWidth, availableHeight/contentHeight );

有人可以告诉我为什么它有效以及我们到底用它做什么吗？

请引用this了解更多信息。

Answer 1

您发布的代码是取某个组件的宽度与整个页面的宽度之间的百分比以及同一组件的高度与整个页面的高度之间的百分比，但它只获取了之间较小的比例两个计算考虑页面是横向还是纵向布局。

显然，您发布的这一行得出的这个数字将用于计算您想要在您用来绘制的默认屏幕发生变化时获得的值。假设您正在绘制默认布局的 Canvas 为 1024px x 768px，我们会这样做:

var scale = Math.min(
    availableWidth /   /*1024px*/
    contentWidth,      /*500px => (100 / 2048) = 48.82% of available height */
    availableHeight /  /*768px/*
    contentHeight      /*145px (100 / 5.2965) = 19.02% of available height*/
);

在这种情况下，您的行将带来 19.02%，因为 Math.min 方法带来了数组的最小值。因此，您也可以使用该对象的高度作为引用来确定其宽度，以尽量保持页面的纵横比。但在我看来，理想的事情是你学会处理 flex 布局，甚至可能使用 Bootstrap ，以更少的工作构建响应式网格，因为 CSS 会根据 native 屏幕尺寸为你缩放，而不需要计算。;D