如何使滑块响应（codepen）？

Question

我正在使用此滑块，但没有响应。 谁能告诉我如何使此滑块响应。

我使width:100%; 但是内容没有任何帮助，或者建议使用更苗条的滑块

https://codepen.io/ivanrafael/pen/xGNOrP

    .anim-slider {
  background: #225A86;
  list-style-type: none;
  position: relative;
  overflow: hidden;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 550px;
  padding:0;
  margin:0;
}

Answer 1

这是我当前正在使用的Sass mixin（如今的尺寸可能有点过时了）：

@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: 767px) { @content; }
  }
  @else if $class == sm {
    @media (min-width: 768px) { @content; }
  }

  @else if $class == md {
    @media (min-width: 992px) { @content; }
  }
  @else if $class == lg {
    @media (min-width: 1200px) { @content; }
  }
  @else if $class == xlg {
    @media (min-width: 1367px) { @content; }
  }
  @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg";
  }
}

它只是媒体查询的快捷方式。 然后我用

@include breakpoint(xs) {
 ... properties targeting mobile only go here ...
}

然后，这取决于您希望滑块在不同断点处显示的方式。 依实例：

.anim-slide img#css3 {
    left: 35%;
    top: 4%;
}

在移动视图上似乎效果不佳。

对于这种特定情况，您可能更喜欢：

.anim-slide img#css3 {
    left: 35%;
    @include breakpoint(xs) {
      left: 25%;
    }
    top: 4%;
}

这与：

.anim-slide img#css3 {
    left: 25%;
    @include breakpoint(sm) {
      left: 35%;
    }
    top: 4%;
}

这与（无骚扰）相同：

.anim-slide img#css3 {
    left: 35%;
    @media (max-width: 767px) {
      left: 25%;
    }
    top: 4%;
}

这只是一个示例，您可能必须在多个类上执行此操作，并使用几个不同的断点来使滑块具有完美的响应能力。