Javascript 滑块与窗口宽度

我首先在JSFIDLE中单击“run”，我的基本/开始宽度是

minwidth:900px

media query，在这里滑块可以正常工作

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

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

偏移的幻灯片宽度将从

最小宽度：900px

媒体查询（幻灯片宽度700px）中获取，即使我在较小的

最大宽度700px

（幻灯片宽度500px）中。 我想在单击以执行我当前所在的媒体查询的.c-证明的宽度时，按下一个/上一个按钮。无论我在两次媒体查询之间调整窗口大小多少次

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

---

您必须与使用相同的媒体查询保持一致-您曾经使用

max width

，然后使用

min width

，这会导致问题。一个规则用于低于900px的所有对象，另一个规则用于高于700px的所有对象，因此这两个200px之间存在冲突：）

我认为建议的方法是：

• 写一个默认行为
• 为

  最大宽度：900px

• 为

  max width:700px

  编写一个特定的代码，该代码将重载上一个

或者另一种方法——相反的方法——从较小的方法开始，使用

min width

作为指导，您可以查看最流行的

网格

库是如何做到这一点的（例如引导网格系统）。然后倾向于不混合

最大宽度

和

最小宽度

，因为它们相互重叠，通常会产生意外的结果

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

这是代码的更新版本（仍有一些错误，但容器滑动正确）。这应该是未来改进的一个好点：

---

旁注：请尝试以更好的方式重用您的代码-代码段中的许多代码是不需要复制的，因此可读性较差-请检查我移动到全局上下文中的块。

感谢您的回答，但没有200px冲突…最大宽度：700px表示从0px到700px的宽度，而最小宽度：900px表示宽度从900px向上基本上，700px和900px之间仍然存在差距，这就是布局混乱的原因。我仍然建议级联媒体查询，就像我在修改的JSFIDLE中所做的那样。