Адаптивная ширина с единицей em в CSS - PullRequest
Новая
       1

Адаптивная ширина с единицей em в CSS

0 голосов
/ 25 сентября 2018

Я пытаюсь создать собственный слайдер, для которого я нашел пример кода.Я настроил его немного в соответствии со своими потребностями, но не смог правильно установить ширину элемента диапазона ползунка.

enter image description here

Размеры и расчеты преобразованияопределяется в 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;
        }
    }
}

Вот ссылка на кодовое поле - https://codepen.io/thebabydino/pen/WdeYMd для примера вывода и более подробной информации.Как я могу сделать слайдер отзывчивым?Пожалуйста, дайте мне знать, если я могу предоставить более подробную информацию.

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Используйте для отзывчивого div 

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

И будет отзывчивым, и не забывайте о @ media-query

0 голосов
/ 25 сентября 2018

Единица Em просто реагирует на размер шрифта (элемента, Rem является корнем).Чтобы масштабировать это, вы должны масштабировать размер шрифта.

Вместо этого вы можете использовать другие отзывчивые единицы измерения, такие как vw для ширины вида или vh для высоты вида (и vmin и vmax) или% (что дает понимание того, как родители, положение и отображение влияют на это.)

Вот больше информации о единицах измерения в css

Поскольку ползунок шире, чем высокий, я полагаю, вы можете изменить em для vw и поиграть со значениями aбит.

См .: https://codepen.io/anon/pen/RYzpdx Это будет отзывчиво, как всегда на 50% ширины страницы (я добавил 25-ваттное поле слева, чтобы отцентрировать его, чтобы показать его немного лучше) 

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