带有 javascript、范围输入和 css 变换的数学：scale()答案

【问题标题】：Mathematics with javascript, range input, and css transform: scale()带有 javascript、范围输入和 css 变换的数学：scale()
【发布时间】：2017-09-19 13:21:00
【问题描述】：

我有一个宽度为 794px 的 div 和一个最大 250 最小 0 的范围输入。我正在使用 css 转换缩放 div：scale(1)，其中 1 是 div 实际显示为 794px 的时间。

但是，当浏览器窗口的宽度大于该宽度时，我希望能够进一步放大，这样当窗口为 1588 像素时，div 的值应该是 scale(2)。而当浏览器窗口小于 794px 时，最大值（250）应该代表窗口的宽度。

我为此尝试了几种不同的解决方案，我只会发布最后一个，以免混淆任何人。

Javascript：

const baseWidth = 794;
const maxWidth = (baseWidth * 2) + 50;
const workspace = document.getElementById('workspace');
const oWidth = workspace.offsetWidth;
const rangeValue = zoomElement.target.value;
const rangeStepSizeByPixels = (oWidth - 0) / 250;
const rangeStepSizeByPercent = (rangeStepSizeByPixels / oWidth) * 100;
const trueZoom = rangeValue * this.state.rangeStepSize;

this.setState({
    ...this.state,
    actualZoom: trueZoom,
    height: (700 * trueZoom) / 100,
    width: (550 * trueZoom) / 100,
});

HTML：

<section id="infobar" class="inner-margin">
    <input type="range" step="0.4" min="0" max="250" class="zoomslider" value="250">
</section>

<section id="workspace" class="scrollable tender-edit orange-midnight-them">

    <div class="doccontainer" style="width: 794px; height: 1123px;">
        <section class="init-scale" style="transform: scale(1);">
            <div class="doc-header">
            ...
            </div>
            <div class="doc-inner">
            ...
            </div>
            <div class="doc-footer">
            ...
            </div>
        </section>
    </div>

</section>

这导致范围值 250 与设置 scale(1) 相同的情况，这不是我想要的。

【问题讨论】：

这不适用于 CSS 媒体查询吗？与此类似：stackoverflow.com/questions/13033918/…
@Fran，如果我想要范围输入以便用户可以决定他想要的缩放，我该怎么做？
啊，好的，我明白了。没有看到蝙蝠的权利。看了上面的问题，这个可以分开吗？基本功能没有在 CSS 中自定义缩放，然后是用户定义的缩放？
@Fran，没关系 :)
@Fran，我不太明白你的意思：/

标签： javascript html css range

【解决方案1】：

好吧，在得到朋友的帮助后，发现答案比我想象的要简单得多。

const factor = (oWidth - 50) / baseWidth;

（-50 只是在父元素上设置一些填充。）

有了这个数字，我得到了乘法因子，然后我可以用它来设置我所追求的百分比值，还可以计算我的范围输入应该具有的默认值。

const rangeValue = zoomElement.target.value;
const trueZoom = (rangeValue / 250) * 100 * this.state.factor;

这是我在更改范围输入时得到的值。

以下是我根据父元素的实际宽度计算设置默认缩放和默认范围值。

const defaultDocWidth = ((oWidth - 50) * 0.5) / 2;
const newFactor = (defaultDocWidth / (oWidth - 50));
const defaultZoom = (defaultDocWidth) * newFactor;
const defaultRangeValue = (250 / 100) * defaultZoom;

【讨论】：