em 单位的响应宽度 CSS

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

这里是代码笔 link-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

em 单位的响应宽度 CSS

Responsive width with em unit in CSS

html

css

sass

scss-mixins