Question

我首先点击jsfiddle中的“run”，我的base / start width是min-width:900px媒体查询，这里的滑块无问题...

...但是我随后将我的鼠标手动调整为较小的最大宽度700px媒体查询

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

即使我在较小的min-width:900px（幻灯片宽度为500px）内，也会从max-width 700px媒体查询（幻灯片宽度为700px）获取幻灯片宽度。我想在单击时创建下一个/上一个按钮，以执行我当前所在的媒体查询的.c-testimonial的宽度。无论我在两个媒体查询之间调整窗口大小的次数。

@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导致问题。一个规则重用于低于900px的所有内容，另一个规则用于高于700px的所有内容，因此您在这些200px之间存在冲突：）

我认为推荐的方法是：

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

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

作为指南，您可以查看最受欢迎的grid库的工作方式（例如Bootstrap网格系统）。然后往往不会混合max-width和min-width，因为它们相互重叠，通常会产生意想不到的结果。

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

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

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

滑块与窗口宽度

1 个答案: