Question

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

使用SCSS以em单位定义大小和变换计算。我可以在SCSS中设置$track-w的宽度，滑块的宽度足以适应我的屏幕尺寸，但其他屏幕的宽度却有所不同。下面是代码。

$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;
        }
    }
}

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

Answer 1

单位Em仅响应字体的大小（元素的Rem是根的）。要缩放此字体，必须缩放字体大小。

相反，您可以使用其他响应单位，例如，vw表示视图宽度，vh表示视图高度（以及vmin和vmax）或％（附带一些了解父级，位置和显示方式的影响）

Here's more info about units in css

由于滑块的宽度比高度大，我想您可以将vw的em更改为一点，然后再试一下。

请参阅： https://codepen.io/anon/pen/RYzpdx 它将始终在整个页面的50％中响应（我确实在左侧添加了25vw的边距以使其居中，以显示出更好的效果）

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

Answer 2

用于响应div

.your-class {
  max-width: 44em/px etc.
  width: 100%;
}

并且会做出响应，不要忘了@ media-query

CSS中em单元的响应宽度

2 个答案: