0

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

在此处输入图像描述

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

$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用于示例输出和更多详细信息。如何使滑块响应？如果我可以提供更多详细信息，请告诉我。

4

2 回答 2

0

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

相反，您可以使用其他响应式单位，例如 vw 用于视图宽度或 vh 用于视图高度（以及 vmin 和 vmax）或 %（这需要了解父级、位置和显示如何影响）

这是有关 css 中单位的更多信息

由于滑块的宽度大于高度，我想您可以将 em 更改为 vw 并稍微调整一下这些值。

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

$track-w: 50vw;
$track-h: .25vw;
$thumb-d: 1.5vw;
于 2018-09-25T11:23:41.983 回答
0

用于响应式 div

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

并且会响应，不要忘记@media-query

于 2018-09-25T11:26:41.357 回答