滑块与窗口宽度

Question

https://jsfiddle.net/57wm5dy7/3/

我首先在 jsfiddle 中单击“运行”，我的基本/起始宽度是 min-width:900px 媒体查询，这里滑块可以正常工作...

...但随后我用鼠标手动调整窗口大小，使其变为更小的最大宽度 700px 媒体查询

然后我点击下一步按钮（右箭头）

被偏移的幻灯片宽度将从min-width:900px媒体查询（幻灯片宽度700px）获取，即使我在较小的max-width 700px（幻灯片宽度500px）内。 我想在单击以执行我当前所在的媒体查询的 .c-testimonial 的宽度时制作下一个/上一个按钮。无论我在 2 个媒体查询之间调整窗口大小多少次。

@media screen and  (max-width:700px) {

  .c-testimonials {
        position: relative;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        text-align:center;
        padding:70px 0;
          &:before {
              content: '';
              position:absolute;
              top:0;
              bottom:0;
              z-index:-1;
              width:100vw;
              left: calc(-50vw + 50%);
              background-color: #f8f8f8;
          }    
          &__mask {
              margin:0 auto;
              position: relative;
              overflow:hidden;
          }
    }
}

Answer 1

您必须与使用相同的媒体查询保持一致-您曾经使用max-width，然后使用min-width，这会导致问题。一条规则用于低于 900 像素的所有内容，另一条用于高于 700 像素的所有内容，因此您在这 200 像素之间存在冲突 :)

我认为推荐的方法是：

• 编写默认行为
• 为max-width: 900px写一个特定的代码
• 为max-width: 700px 编写一个特定代码，该代码将重载之前的代码

或者另一种方法——相反的方法——从较小的方法开始并使用min-width。

作为指导，您可以查看最流行的 grid 库是如何做到这一点的（例如 Bootstrap 网格系统）。然后不要将max-width 和min-width 混用，因为它们相互重叠，通常会产生意想不到的结果。

另一件事 - 你的 CSS 中有两个断点（900px 和 700px），但你的代码中只有一个断点......

这是您代码的更新版本（仍有一些错误，但容器已正确滑动）。这应该是未来改进的一个好点：https://jsfiddle.net/57wm5dy7/4/

旁注：请尝试以更好的方式重用您的代码 - sn-p 中的许多代码在不需要的情况下被复制，因此可读性较差 - 请检查我移至全局上下文的块.