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

与（没有sass）相同：

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

这只是一个例子，您可能需要在几个类上执行此操作并使用多个不同的断点来使滑块完全响应。

如何使滑块响应（codepen）？

1 个答案: