html - CSS中带有em单位的响应宽度

Question

我正在尝试制作一个自定义 slider ，并为其找到了示例代码。我已根据需要对其进行了一些自定义，但无法适本地设置 slider 范围元素的宽度。

在使用 SCSS 时，大小和转换计算以 em 单位定义。我可以在 SCSS 中设置 $track-w 的宽度 slider 对于我的屏幕尺寸来说足够宽，但对于其他屏幕来说它会有所不同。下面是代码。

$track-w: 55em; //this width is not responsive
$track-h: .25em;
$thumb-d: 1.5em;
$dist: $track-w - $thumb-d;

@mixin track() {
    box-sizing: border-box;
    border: none;
    width: $track-w;
    height: $track-h;
}

.wrap {
    display: flex;
    align-items: center;
    position: relative;
    width: $track-w;
    height: 3.5*$thumb-d;
    font: 1em/1 arial, sans-serif
}

[type='range'] {
    &, &::-webkit-slider-thumb {
        -webkit-appearance: none
    }

    flex: 1;
    margin: 0;
    padding: 0;
    min-height: $thumb-d;
    background: transparent;
    font: inherit;

    &::-webkit-slider-runnable-track {
        @include track()
    }
    &::-moz-range-track { @include track }
    &::-ms-track { @include track }

    &::-webkit-slider-thumb {
        margin-top: .3*($track-h - $thumb-d);
    }
    &::-ms-thumb {
        margin-top: 0;
    }

    &::-ms-tooltip { display: none }

    ~ output {
        display: none;

        .js & {
            display: block;
            position: absolute;
            left: .5*$thumb-d; top: 0;
            padding: .25em .5em;
            border-radius: 3px;
            transform: translate(calc((var(--val) - var(--min))/(var(--max) - var(--min))*#{$dist} - 50%));
            background: #4285f4;
            color: #eee;
        }
    }
}

这是代码笔链接- https://codepen.io/thebabydino/pen/WdeYMd示例输出和更多详细信息。如何使 slider 响应？如果我可以提供更多详细信息，请告诉我。

Answer 1

单位 Em 仅响应字体的大小(对于元素，Rem 是根)。要缩放它，您必须缩放字体大小。

相反，您可以使用其他响应式单位，例如 View 宽度的 vw 或 View 高度的 vh(以及 vmin 和 vmax)或 %(需要了解父项、位置和显示如何影响它)

Here's more info about units in css

由于 slider 的宽度大于高度，我想您可以更改 vw 的 em 并稍微调整一下值。

参见: https://codepen.io/anon/pen/RYzpdx 这将始终响应页面宽度的 50%(我确实在左侧添加了 25vw 边距以使其居中，以更好地展示它)

$track-w: 50vw;
$track-h: .25vw;
$thumb-d: 1.5vw;